From 74847949992fe408cd72674f4d1f9d688d8aebb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Glawaty?= <tomasglawaty@icloud.com>
Date: Tue, 12 Dec 2023 07:56:20 +0100
Subject: [PATCH] Embed banners improvements

- improved embed banners handling
- responsive breakpoints from external banners can be now manager by JS client after invoking the method `ExternalBanner.delegateResponsiveBehaviour()`
---
 demo/index.html                               |   6 +-
 src/banner/banner-manager.mjs                 |  71 ++++++-----
 src/banner/banner.mjs                         |   6 +
 src/banner/external/external-banner.mjs       |  72 +++++++++---
 src/banner/managed/banner-data.mjs            | 100 ++--------------
 src/banner/managed/managed-banner.mjs         |  99 +++++++++++++---
 src/banner/responsive/content.mjs             |  17 +++
 src/banner/responsive/contents.mjs            | 111 ++++++++++++++++++
 src/banner/responsive/dimensions-provider.mjs |  17 +++
 src/client/embed/client.mjs                   |  29 ++++-
 src/client/standard/client.mjs                |  98 ++++++++--------
 src/frame/banner-frame-messenger.mjs          |  32 +++++
 src/frame/frame-messenger.mjs                 |  15 ++-
 .../banner-interaction-watcher.mjs            |  14 +--
 .../intersection-observer-factory.mjs         |   4 +-
 src/request/embed-url-factory.mjs             |  15 ++-
 src/request/request.mjs                       |  22 ++--
 src/utils/dom-helpers.mjs                     |  23 ++++
 18 files changed, 512 insertions(+), 239 deletions(-)
 create mode 100644 src/banner/responsive/content.mjs
 create mode 100644 src/banner/responsive/contents.mjs
 create mode 100644 src/banner/responsive/dimensions-provider.mjs
 create mode 100644 src/utils/dom-helpers.mjs

diff --git a/demo/index.html b/demo/index.html
index be98979..6a5b290 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,7 +18,7 @@
     <!-- Custom styles -->
     <style>
         .container {
-            max-width: 1000px;
+            max-width: 1200px;
             text-align: center;
             margin: 0 auto;
         }
@@ -58,7 +58,7 @@
             url: 'http://localhost:8888',
             channel: 'amp-demo',
             resources: {
-                role: 'guest'
+                roles: 'guest',
             },
             metrics: {
                 receiver: 'debug',
@@ -225,7 +225,7 @@ <h2>Embed banner:</h2>
         }
 
         window.AMPClient.on('amp:banner:state-changed', function (banner) {
-            if ('RENDERED' !== banner.state || !banner.positionData.isMultiple()) {
+            if ('RENDERED' !== banner.state || !banner.positionData.isMultiple() || banner.isEmbed()) {
                 return;
             }
 
diff --git a/src/banner/banner-manager.mjs b/src/banner/banner-manager.mjs
index 9412cab..84b59c4 100644
--- a/src/banner/banner-manager.mjs
+++ b/src/banner/banner-manager.mjs
@@ -4,27 +4,41 @@ import { EmbedBanner } from './embed/embed-banner.mjs';
 import { Banner } from './banner.mjs';
 import { State } from './state.mjs';
 import { Fingerprint } from './fingerprint.mjs';
-import { Resource } from '../request/resource.mjs';
 import { SequenceGenerator } from '../utils/sequence-generator.mjs';
+import { getHtmlElement } from '../utils/dom-helpers.mjs';
 
 export class BannerManager {
     #eventBus;
+    #dimensionsProvider;
+    #bannerRenderer;
     #sequenceGenerator;
     #banners = [];
 
-    constructor(eventBus) {
+    /**
+     * @param {EventBus} eventBus
+     * @param {DimensionsProvider} dimensionsProvider
+     * @param {BannerRenderer|null} bannerRenderer
+     */
+    constructor(
+        eventBus,
+        dimensionsProvider,
+        bannerRenderer = null,
+    ) {
         this.#eventBus = eventBus;
+        this.#dimensionsProvider = dimensionsProvider;
+        this.#bannerRenderer = bannerRenderer;
         this.#sequenceGenerator = new SequenceGenerator();
 
         this.STATE = State;
     }
 
     addExternalBanner(element) {
-        element = this.#getElement(element);
+        element = getHtmlElement(element);
 
         element.setAttribute('data-amp-attached', '');
 
         const banner = new ExternalBanner(
+            this.#dimensionsProvider,
             this.#eventBus,
             this.#sequenceGenerator.getNextIdentifier(),
             element,
@@ -36,22 +50,22 @@ export class BannerManager {
     }
 
     addManagedBanner(element, position, resources = {}, options = {}) {
-        const resourceArr = [];
-        let key;
-        element = this.#getElement(element);
+        if (null === this.#bannerRenderer) {
+            throw new Error(`Unable to add managed banner, renderer is not provided.`);
+        }
 
-        element.setAttribute('data-amp-attached', '');
+        element = getHtmlElement(element);
 
-        for (key in resources) {
-            resourceArr.push(new Resource(key, resources[key]));
-        }
+        element.setAttribute('data-amp-attached', '');
 
         const banner = new ManagedBanner(
+            this.#dimensionsProvider,
+            this.#bannerRenderer,
             this.#eventBus,
             this.#sequenceGenerator.getNextIdentifier(),
             element,
             position,
-            resourceArr,
+            resources,
             options,
         );
 
@@ -61,7 +75,7 @@ export class BannerManager {
     }
 
     addEmbedBanner(iframe, position, options) {
-        iframe = this.#getElement(iframe);
+        iframe = getHtmlElement(iframe);
 
         iframe.setAttribute('data-amp-attached', '');
 
@@ -78,6 +92,13 @@ export class BannerManager {
         return banner;
     }
 
+    removeBanner(banner) {
+        const length = this.#banners.length;
+        this.#banners = this.#banners.filter(b => b !== banner);
+
+        return length !== this.#banners.length;
+    }
+
     getBannersByState({state, managed = true, external = true, embed = true}) {
         return this.#banners.filter(banner => {
             if (!(banner instanceof Banner) || banner.state !== state) {
@@ -92,7 +113,7 @@ export class BannerManager {
         const fingerprintValue = fingerprint instanceof Fingerprint ? fingerprint.value : fingerprint;
 
         for (let banner of this.#banners) {
-            if (banner in EmbedBanner) {
+            if (banner instanceof EmbedBanner) {
                 continue;
             }
 
@@ -115,28 +136,4 @@ export class BannerManager {
 
         return null;
     }
-
-    #getElement(el) {
-        if (el instanceof HTMLElement) {
-            return el;
-        }
-
-        if (typeof el !== 'string') {
-            throw new TypeError('Element must be instance of HTMLElement or String');
-        }
-
-        let htmlEl;
-
-        if ('#' === el.charAt(0)) {
-            htmlEl = document.getElementById(el.slice(1));
-        } else {
-            htmlEl = document.querySelector(el);
-        }
-
-        if (!(htmlEl instanceof HTMLElement)) {
-            throw new TypeError('Selector ' + el + ' is invalid.');
-        }
-
-        return htmlEl;
-    }
 }
diff --git a/src/banner/banner.mjs b/src/banner/banner.mjs
index 2a9cec2..d9dcc60 100644
--- a/src/banner/banner.mjs
+++ b/src/banner/banner.mjs
@@ -32,6 +32,9 @@ export class Banner {
         return this.#uid;
     }
 
+    /**
+     * @returns {HTMLElement}
+     */
     get element() {
         return this.#element;
     }
@@ -92,6 +95,9 @@ export class Banner {
         return null;
     }
 
+    redrawIfNeeded() {
+    }
+
     isManaged() {
         return false;
     }
diff --git a/src/banner/external/external-banner.mjs b/src/banner/external/external-banner.mjs
index 2af7da8..ef96fcd 100644
--- a/src/banner/external/external-banner.mjs
+++ b/src/banner/external/external-banner.mjs
@@ -2,12 +2,14 @@ import { Banner } from '../banner.mjs';
 import { Fingerprint } from '../fingerprint.mjs';
 import { PositionData } from '../position-data.mjs';
 import { AttributesParser } from '../attributes-parser.mjs';
+import { Contents } from '../responsive/contents.mjs';
 
 export class ExternalBanner extends Banner {
     #fingerprints = [];
-    #breakpointsByBannerId = {};
+    #contentsByBannerId = null;
+    #responsiveBehaviourDelegated = false;
 
-    constructor(eventBus, uid, element) {
+    constructor(dimensionsProvider, eventBus, uid, element) {
         if (!('ampBannerExternal' in element.dataset)) {
             throw new Error(`Unable to initialize ExternalBanner from element that does not have an attribute "data-amp-external".`);
         }
@@ -25,7 +27,7 @@ export class ExternalBanner extends Banner {
         super(eventBus, uid, element, positionData.code, options);
 
         const fingerprints = [];
-        const breakpointsByBannerId = {};
+        const contentsByBannerId = {};
 
         for (let banner of element.querySelectorAll('[data-amp-banner-fingerprint]')) {
             const fingerprint = Fingerprint.createFromValue(banner.dataset.ampBannerFingerprint);
@@ -36,20 +38,17 @@ export class ExternalBanner extends Banner {
                 let breakpoint = content.dataset.ampContentBreakpoint;
                 breakpoint = 'default' === breakpoint ? null : parseInt(breakpoint);
 
-                if (!(fingerprint.bannerId in breakpointsByBannerId)) {
-                    breakpointsByBannerId[fingerprint.bannerId] = [];
+                if (!(fingerprint.bannerId in contentsByBannerId)) {
+                    contentsByBannerId[fingerprint.bannerId] = new Contents(dimensionsProvider, positionData.breakpointType);
                 }
 
-                breakpointsByBannerId[fingerprint.bannerId].push({
-                    breakpoint: breakpoint,
-                    element: content,
-                })
+                contentsByBannerId[fingerprint.bannerId].addContent(breakpoint, content);
             }
         }
 
         this._positionData = positionData;
         this.#fingerprints = fingerprints;
-        this.#breakpointsByBannerId = breakpointsByBannerId;
+        this.#contentsByBannerId = contentsByBannerId;
 
         this.setState(state.value, state.info);
     }
@@ -65,14 +64,22 @@ export class ExternalBanner extends Banner {
      * @returns {number|null}
      */
     getCurrenBreakpoint(bannerId) {
-        const breakpointsByBannerId = this.#breakpointsByBannerId;
-        const breakpoints = breakpointsByBannerId[bannerId] || [];
+        const contentsByBannerId = this.#contentsByBannerId;
+        const contents = contentsByBannerId[bannerId] || null;
 
-        for (let breakpoint of breakpoints) {
-            const style = getComputedStyle(breakpoint.element);
+        if (null === contents) {
+            return null;
+        }
+
+        if (this.#responsiveBehaviourDelegated) {
+            return contents.content ? contents.content.breakpoint : null;
+        }
+
+        for (let content of contents.contents) {
+            const style = getComputedStyle(content.data);
 
             if ('none' !== style.display) {
-                return breakpoint.breakpoint;
+                return content.breakpoint;
             }
         }
 
@@ -82,4 +89,39 @@ export class ExternalBanner extends Banner {
     isExternal() {
         return true;
     }
+
+    delegateResponsiveBehaviour() {
+        if (this.#responsiveBehaviourDelegated) {
+            return;
+        }
+
+        this.#responsiveBehaviourDelegated = true;
+        const styles = this.element.querySelectorAll('style');
+
+        for (let style of styles) {
+            style.remove();
+        }
+
+        this.redrawIfNeeded();
+    }
+
+    redrawIfNeeded() {
+        if (!this.#responsiveBehaviourDelegated) {
+            return;
+        }
+
+        for (let bannerId in this.#contentsByBannerId) {
+            const contents = this.#contentsByBannerId[bannerId];
+
+            if (!contents.needRedraw()) {
+                continue;
+            }
+
+            const currentContent = contents.content;
+
+            for (let content of contents.contents) {
+                content.data.style.display = content === currentContent ? 'block' : 'none';
+            }
+        }
+    }
 }
diff --git a/src/banner/managed/banner-data.mjs b/src/banner/managed/banner-data.mjs
index 708775f..f634872 100644
--- a/src/banner/managed/banner-data.mjs
+++ b/src/banner/managed/banner-data.mjs
@@ -1,21 +1,18 @@
 import { Fingerprint } from '../fingerprint.mjs';
+import { Contents } from '../responsive/contents.mjs';
 
 export class BannerData {
     #data;
-    #breakpointType;
+    #contents;
     #fingerprint = null;
-    #resolvedContent = null;
-    #resolvedContentBounds = {
-        min: null,
-        max: null,
-        reset: function () {
-            this.min = this.max = null;
-        },
-    };
-
-    constructor(data, breakpointType) {
+
+    constructor(data, breakpointType, dimensionsProvider) {
         this.#data = data;
-        this.#breakpointType = breakpointType;
+        this.#contents = new Contents(dimensionsProvider, breakpointType);
+
+        for (let content of this.#data.contents) {
+            this.#contents.addContent(content['breakpoint'], content);
+        }
     }
 
     set fingerprint(fingerprint) {
@@ -64,85 +61,10 @@ export class BannerData {
     }
 
     get content() {
-        if (null !== this.#resolvedContent && !this.needRedraw()) {
-            return this.#resolvedContent;
-        }
-
-        this.#resolvedContentBounds.reset();
-
-        const windowWith = this.#getWidth();
-        const contents = this.#data.contents;
-        const breakpointType = this.#breakpointType;
-
-        let defaultContent = null,
-            alternativeContent = null,
-            currentBreakpoint = null;
-
-        const breakpoints = [];
-
-        this.#iterate(contents, (content) => {
-            let breakpoint = content['breakpoint'];
-
-            if (null === breakpoint) {
-                defaultContent = content;
-
-                return;
-            }
-
-            breakpoints.push(breakpoint);
-
-            if (('min' === breakpointType && windowWith >= breakpoint && (null === currentBreakpoint || currentBreakpoint < breakpoint))
-                || ('max' === breakpointType && windowWith <= breakpoint && (null === currentBreakpoint || currentBreakpoint > breakpoint))) {
-                alternativeContent = content;
-                currentBreakpoint = breakpoint;
-                this.#resolvedContentBounds[breakpointType] = breakpoint;
-            }
-        });
-
-        if (null === alternativeContent && null === defaultContent) {
-            throw new Error(`Missing content for banner with ID ${this.id}`);
-        }
-
-        // find bounds
-        breakpoints.sort((a, b) => a - b);
-
-        if ('min' === breakpointType) {
-            breakpoints.unshift(null);
-        } else {
-            breakpoints.push(null);
-        }
-
-        const currentBreakpointIndex = breakpoints.indexOf(currentBreakpoint);
-
-        if ('max' === breakpointType && (currentBreakpointIndex - 1) in breakpoints) {
-            this.#resolvedContentBounds.min = breakpoints[currentBreakpointIndex - 1];
-        }
-
-        if ('min' === breakpointType && (currentBreakpointIndex + 1) in breakpoints) {
-            this.#resolvedContentBounds.max = breakpoints[currentBreakpointIndex + 1];
-        }
-
-        return this.#resolvedContent = null !== alternativeContent ? alternativeContent : defaultContent;
+        return this.#contents.content.data;
     }
 
     needRedraw() {
-        if (null === this.#resolvedContent) {
-            return true;
-        }
-
-        const windowWith = this.#getWidth();
-
-        return ((null !== this.#resolvedContentBounds.min && windowWith < this.#resolvedContentBounds.min)
-            || (null !== this.#resolvedContentBounds.max && windowWith > this.#resolvedContentBounds.max));
-    }
-
-    #getWidth() {
-        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    }
-
-    #iterate(data, cb) {
-        for (let i in data) {
-            cb(data[i], i);
-        }
+        return this.#contents.needRedraw();
     }
 }
diff --git a/src/banner/managed/managed-banner.mjs b/src/banner/managed/managed-banner.mjs
index b49c85b..676cfc5 100644
--- a/src/banner/managed/managed-banner.mjs
+++ b/src/banner/managed/managed-banner.mjs
@@ -4,27 +4,66 @@ import { BannerData } from './banner-data.mjs';
 import { ResponseData } from './response-data.mjs';
 import { Randomizer } from '../../utils/randomizer.mjs';
 import { Fingerprint } from '../fingerprint.mjs';
+import { Resource } from '../../request/resource.mjs';
 
 export class ManagedBanner extends Banner {
-    #resources;
+    #dimensionsProvider;
+    #renderer;
+    #resources = [];
+    #rawResources;
     #responseDataReceived = false;
     #resolvedBannerData = null;
     #banners = [];
 
-    constructor(eventBus, uid, element, position, resources = [], options = {}) {
+    /**
+     * @param {DimensionsProvider} dimensionsProvider
+     * @param {BannerRenderer} renderer
+     * @param {EventBus} eventBus
+     * @param {String} uid
+     * @param {HTMLElement} element
+     * @param {String} position
+     * @param {Object} resources
+     * @param {Object} options
+     */
+    constructor(
+        dimensionsProvider,
+        renderer,
+        eventBus,
+        uid,
+        element,
+        position,
+        resources = {},
+        options = {},
+    ) {
         super(eventBus, uid, element, position, options);
 
-        this.#resources = resources;
+        this.#dimensionsProvider = dimensionsProvider;
+        this.#renderer = renderer;
+        this.#rawResources = resources;
+
+        for (let key in resources) {
+            this.#resources.push(new Resource(key, resources[key]));
+        }
     }
 
     set html(html) {
         this.element.innerHTML = html;
     }
 
+    /**
+     * @returns {Array<Resource>}
+     */
     get resources () {
         return this.#resources;
     }
 
+    /**
+     * @returns {Object}
+     */
+    get rawResources() {
+        return this.#rawResources;
+    }
+
     /**
      * @deprecated Use property `positionData` for accessing information about a position
      */
@@ -109,19 +148,6 @@ export class ManagedBanner extends Banner {
         return data;
     }
 
-    getCurrenBreakpoint(bannerId) {
-        let bannerData = this.bannerData;
-        bannerData = (Array.isArray(bannerData) ? bannerData : [bannerData]).find(banner => banner.id === bannerId);
-
-        const breakpoint = bannerData && bannerData.content ? bannerData.content.breakpoint : null;
-
-        return null === breakpoint ? null : parseInt(breakpoint);
-    }
-
-    isManaged() {
-        return true;
-    }
-
     setResponseData(responseData) {
         if (this.#responseDataReceived) {
             throw new Error(`Data for banner on position ${this.position} is already set.`);
@@ -139,14 +165,51 @@ export class ManagedBanner extends Banner {
         const banners = [];
 
         for (let i in (responseData.banners || [])) {
-            banners.push(new BannerData(responseData.banners[i], responseData['breakpoint_type']));
+            banners.push(new BannerData(
+                responseData.banners[i],
+                responseData['breakpoint_type'],
+                this.#dimensionsProvider,
+            ));
         }
 
         this.#banners = banners;
         this.#responseDataReceived = true;
+
+        this.#render('Banner was successfully rendered.');
+    }
+
+    getCurrenBreakpoint(bannerId) {
+        let bannerData = this.bannerData;
+        bannerData = (Array.isArray(bannerData) ? bannerData : [bannerData]).find(banner => banner.id === bannerId);
+
+        const breakpoint = bannerData && bannerData.content ? bannerData.content.breakpoint : null;
+
+        return null === breakpoint ? null : parseInt(breakpoint);
+    }
+
+    isManaged() {
+        return true;
+    }
+
+    redrawIfNeeded() {
+        if (this.#needRedraw()) {
+            this.#render('Banner was successfully redrawn.');
+        }
+    }
+
+    #render(stateInfo) {
+        try {
+            this.html = this.#renderer.render(this);
+        } catch (e) {
+            this.setState(this.STATE.ERROR, 'Render error: ' + e.message);
+
+            return;
+        }
+
+        this.setState(this.STATE.RENDERED, stateInfo);
     }
 
-    needRedraw() {
+    #needRedraw() {
         let data = this.bannerData;
 
         if (!Array.isArray(data)) {
diff --git a/src/banner/responsive/content.mjs b/src/banner/responsive/content.mjs
new file mode 100644
index 0000000..23fd8a1
--- /dev/null
+++ b/src/banner/responsive/content.mjs
@@ -0,0 +1,17 @@
+export class Content {
+    #breakpoint;
+    #data;
+
+    constructor(breakpoint, data) {
+        this.#breakpoint = breakpoint;
+        this.#data = data;
+    }
+
+    get breakpoint() {
+        return this.#breakpoint;
+    }
+
+    get data() {
+        return this.#data;
+    }
+}
diff --git a/src/banner/responsive/contents.mjs b/src/banner/responsive/contents.mjs
new file mode 100644
index 0000000..086c563
--- /dev/null
+++ b/src/banner/responsive/contents.mjs
@@ -0,0 +1,111 @@
+import { Content } from './content.mjs';
+
+export class Contents {
+    #dimensionsProvider;
+    #breakpointType;
+    #contents = [];
+    #resolvedContent = null;
+    #resolvedContentBounds = {
+        min: null,
+        max: null,
+        reset: function () {
+            this.min = this.max = null;
+        },
+    };
+
+    /**
+     * @param {DimensionsProvider} dimensionsProvider
+     * @param {String|null} breakpointType
+     */
+    constructor(dimensionsProvider, breakpointType) {
+        this.#dimensionsProvider = dimensionsProvider;
+        this.#breakpointType = breakpointType;
+    }
+
+    addContent(breakpoint, data) {
+        this.#contents.push(new Content(breakpoint, data));
+        this.#resolvedContent = null;
+    }
+
+    get contents() {
+        return this.#contents;
+    }
+
+    get content() {
+        if (null !== this.#resolvedContent && !this.needRedraw()) {
+            return this.#resolvedContent;
+        }
+
+        this.#resolvedContentBounds.reset();
+
+        const windowWith = this.#dimensionsProvider.width;
+        const breakpointType = this.#breakpointType;
+
+        let defaultContent = null,
+            alternativeContent = null,
+            currentBreakpoint = null;
+
+        const breakpoints = [];
+
+        this.#iterate(this.#contents, content => {
+            let breakpoint = content.breakpoint;
+
+            if (null === breakpoint) {
+                defaultContent = content;
+
+                return;
+            }
+
+            breakpoints.push(breakpoint);
+
+            if (('min' === breakpointType && windowWith >= breakpoint && (null === currentBreakpoint || currentBreakpoint < breakpoint))
+                || ('max' === breakpointType && windowWith <= breakpoint && (null === currentBreakpoint || currentBreakpoint > breakpoint))) {
+                alternativeContent = content;
+                currentBreakpoint = breakpoint;
+                this.#resolvedContentBounds[breakpointType] = breakpoint;
+            }
+        });
+
+        if (null === alternativeContent && null === defaultContent) {
+            throw new Error(`Unable to resolve content, no contents found.`);
+        }
+
+        // find bounds
+        breakpoints.sort((a, b) => a - b);
+
+        if ('min' === breakpointType) {
+            breakpoints.unshift(null);
+        } else {
+            breakpoints.push(null);
+        }
+
+        const currentBreakpointIndex = breakpoints.indexOf(currentBreakpoint);
+
+        if ('max' === breakpointType && (currentBreakpointIndex - 1) in breakpoints) {
+            this.#resolvedContentBounds.min = breakpoints[currentBreakpointIndex - 1];
+        }
+
+        if ('min' === breakpointType && (currentBreakpointIndex + 1) in breakpoints) {
+            this.#resolvedContentBounds.max = breakpoints[currentBreakpointIndex + 1];
+        }
+
+        return this.#resolvedContent = null !== alternativeContent ? alternativeContent : defaultContent;
+    }
+
+    needRedraw() {
+        if (null === this.#resolvedContent) {
+            return true;
+        }
+
+        const windowWith = this.#dimensionsProvider.width;
+
+        return ((null !== this.#resolvedContentBounds.min && windowWith < this.#resolvedContentBounds.min)
+            || (null !== this.#resolvedContentBounds.max && windowWith > this.#resolvedContentBounds.max));
+    }
+
+    #iterate(data, cb) {
+        for (let i in data) {
+            cb(data[i], i);
+        }
+    }
+}
diff --git a/src/banner/responsive/dimensions-provider.mjs b/src/banner/responsive/dimensions-provider.mjs
new file mode 100644
index 0000000..80453d8
--- /dev/null
+++ b/src/banner/responsive/dimensions-provider.mjs
@@ -0,0 +1,17 @@
+export class DimensionsProvider {
+    #getWidthCallback;
+
+    constructor(getWidthCallback) {
+        this.#getWidthCallback = getWidthCallback;
+    }
+
+    static fromCurrentWindow() {
+        return new DimensionsProvider(() => {
+            return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        });
+    }
+
+    get width() {
+        return (this.#getWidthCallback)();
+    }
+}
diff --git a/src/client/embed/client.mjs b/src/client/embed/client.mjs
index 968bd96..ff7732a 100644
--- a/src/client/embed/client.mjs
+++ b/src/client/embed/client.mjs
@@ -1,11 +1,13 @@
 import { createMainConfig, createExtendedConfig } from './config.mjs';
 import { BannerManager } from '../../banner/banner-manager.mjs';
+import { DimensionsProvider } from '../../banner/responsive/dimensions-provider.mjs';
 import { EventBus } from '../../event/event-bus.mjs';
 import { Events } from '../../event/events.mjs';
 import { ParentFrameMessenger } from '../../frame/parent-frame-messenger.mjs';
 import { BannerInteractionWatcher } from '../../interaction/banner-interaction-watcher.mjs';
 import { MetricsSender } from '../../metrics/metrics-sender.mjs';
 import { MetricsEventsListener } from '../../metrics/metrics-events-listener.mjs';
+import { State } from '../../banner/state.mjs';
 
 export class Client {
     #version;
@@ -18,6 +20,7 @@ export class Client {
     #metricsSender;
     #metricsEventsListener;
     #attached;
+    #parentWindowWidth = null;
 
     /**
      * @param {ClientVersion} version
@@ -31,7 +34,12 @@ export class Client {
         this.#extendedConfig = createExtendedConfig({});
         this.#extendedConfig = null;
         this.#eventBus = new EventBus();
-        this.#bannerManager = new BannerManager(this.#eventBus);
+        this.#bannerManager = new BannerManager(
+            this.#eventBus,
+            new DimensionsProvider(() => {
+                return this.#parentWindowWidth || window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            }),
+        );
         this.#frameMessenger = new ParentFrameMessenger({
             clientEventBus: this.#eventBus,
         });
@@ -49,14 +57,21 @@ export class Client {
 
         this.#frameMessenger.on('connect', ({ data }) => {
             this.#extendedConfig = createExtendedConfig(data.extendedConfig);
+            this.#parentWindowWidth = data.windowWidth;
             this.#bannerInteractionWatcher = new BannerInteractionWatcher(
                 this.#bannerManager,
                 this.#eventBus,
                 this.#extendedConfig.interaction,
             );
 
+            this.#redrawBanners();
             this.#bannerInteractionWatcher.start();
-        })
+        });
+
+        this.#frameMessenger.on('windowResized', ({ data }) => {
+            this.#parentWindowWidth = data.windowWidth;
+            this.#redrawBanners();
+        });
 
         this.#frameMessenger.listen();
         this.#metricsEventsListener.attach();
@@ -89,6 +104,10 @@ export class Client {
         const banner = this.#bannerManager.addExternalBanner(element);
         this.#attached = true;
 
+        if (window.self !== window.top) {
+            banner.delegateResponsiveBehaviour();
+        }
+
         this.#eventBus.dispatch(this.EVENTS.ON_BANNER_ATTACHED, banner);
     }
 
@@ -98,4 +117,10 @@ export class Client {
             eventArgs,
         });
     }
+
+    #redrawBanners() {
+        for (let banner of this.#bannerManager.getBannersByState({ state: State.RENDERED })) {
+            banner.redrawIfNeeded();
+        }
+    }
 }
diff --git a/src/client/standard/client.mjs b/src/client/standard/client.mjs
index e3f74a8..413b96c 100644
--- a/src/client/standard/client.mjs
+++ b/src/client/standard/client.mjs
@@ -3,7 +3,7 @@ import { isGateway, createGateway } from '../../gateway/index.mjs';
 import { RequestFactory } from '../../request/request-factory.mjs';
 import { EmbedUrlFactory } from '../../request/embed-url-factory.mjs';
 import { BannerManager } from '../../banner/banner-manager.mjs';
-import { ManagedBanner } from '../../banner/managed/managed-banner.mjs';
+import { DimensionsProvider } from '../../banner/responsive/dimensions-provider.mjs';
 import { AttributesParser } from '../../banner/attributes-parser.mjs';
 import { EventBus } from '../../event/event-bus.mjs';
 import { Events } from '../../event/events.mjs';
@@ -12,6 +12,7 @@ import { BannerInteractionWatcher } from '../../interaction/banner-interaction-w
 import { MetricsEventsListener } from '../../metrics/metrics-events-listener.mjs';
 import { MetricsSender } from '../../metrics/metrics-sender.mjs';
 import { BannerFrameMessenger } from '../../frame/banner-frame-messenger.mjs';
+import { getHtmlElement } from '../../utils/dom-helpers.mjs';
 
 export class Client {
     #version;
@@ -21,7 +22,6 @@ export class Client {
     #embedUrlFactory;
     #gateway = null;
     #bannerManager;
-    #bannerRenderer;
     #bannerInteractionWatcher;
     #metricsSender;
     #metricsEventsListener;
@@ -50,10 +50,12 @@ export class Client {
 
         this.#bannerManager = new BannerManager(
             this.#eventBus,
+            DimensionsProvider.fromCurrentWindow(),
+            new BannerRenderer(
+                options.template,
+            ),
         );
-        this.#bannerRenderer = new BannerRenderer(
-            options.template,
-        );
+
         this.#bannerInteractionWatcher = new BannerInteractionWatcher(
             this.#bannerManager,
             this.#eventBus,
@@ -91,16 +93,12 @@ export class Client {
             const banners = this.#bannerManager.getBannersByState({
                 state: this.#bannerManager.STATE.RENDERED,
                 managed: true,
-                external: false,
+                external: true,
                 embed: false,
             });
 
-            for (let i in banners) {
-                if (!banners[i].needRedraw()) {
-                    continue;
-                }
-
-                this.renderBanner(banners[i]);
+            for (let banner of banners) {
+                banner.redrawIfNeeded();
             }
         });
 
@@ -144,7 +142,20 @@ export class Client {
         return this.#gateway;
     }
 
-    createBanner(element, position, resources = {}, options = {}) {
+    createBanner(element, position, resources = {}, options = {}, mode = 'managed') {
+        element = getHtmlElement(element);
+
+        if ('embed' === mode) {
+            const iframe = this.#createIframe(element, position, resources, options);
+            const banner = this.#bannerManager.addEmbedBanner(iframe, position, options);
+
+            this.#frameMessenger.connectBanner(banner);
+            element.insertAdjacentElement('afterend', iframe);
+            element.remove();
+
+            return banner;
+        }
+
         return this.#bannerManager.addManagedBanner(element, position, resources, options);
     }
 
@@ -164,20 +175,12 @@ export class Client {
 
             if ('ampBannerExternal' in element.dataset) {
                 banner = this.#bannerManager.addExternalBanner(element);
-            } else if ('ampMode' in element.dataset && 'embed' === element.dataset.ampMode) {
-                const { iframe, options } = this.#createIframeAndOptions(element, position);
-                banner = this.#bannerManager.addEmbedBanner(iframe, position, options);
-
-                this.#frameMessenger.connectBanner(banner);
-                element.insertAdjacentElement('afterend', iframe);
-                element.remove();
-
-                element = iframe;
             } else {
                 const resources = AttributesParser.parseResources(element);
                 const options = AttributesParser.parseOptions(element);
+                const mode = element.dataset.ampMode || 'managed';
 
-                banner = this.createBanner(element, position, resources, options);
+                banner = this.createBanner(element, position, resources, options, mode);
             }
 
             this.#eventBus.dispatch(this.EVENTS.ON_BANNER_ATTACHED, banner);
@@ -199,7 +202,7 @@ export class Client {
         const request = this.#requestFactory.create();
 
         for (let banner of banners) {
-            request.addPosition(banner.position, banner.resources)
+            request.addPosition(banner.position, banner.resources, '1' !== banner.options.get('omit-default-resources', '0').toString())
         }
 
         const success = (response) => {
@@ -215,12 +218,20 @@ export class Client {
                     continue;
                 }
 
-                if (!Array.isArray(data[banner.position]['banners'])) {
-                    data[banner.position]['banners'] = Object.values(data[banner.position]['banners']);
+                const positionData = data[banner.position];
+
+                if (!Array.isArray(positionData['banners'])) {
+                    positionData['banners'] = Object.values(positionData['banners']);
+                }
+
+                if ('embed' === positionData.mode) {
+                    this.createBanner(banner.element, banner.position, banner.rawResources, banner.options.options, positionData.mode);
+                    this.#bannerManager.removeBanner(banner);
+
+                    continue;
                 }
 
-                banner.setResponseData(data[banner.position]);
-                this.renderBanner(banner);
+                banner.setResponseData(positionData);
             }
 
             this.#eventBus.dispatch(this.EVENTS.ON_FETCH_SUCCESS, response);
@@ -238,29 +249,15 @@ export class Client {
         this.getGateway().fetch(request, success, error);
     }
 
-    renderBanner(banner) {
-        if (!(banner instanceof ManagedBanner)) {
-            throw new TypeError(`Only managed banners can be rendered.`);
-        }
-
-        try {
-            banner.html = this.#bannerRenderer.render(banner);
-        } catch (e) {
-            banner.setState(this.#bannerManager.STATE.ERROR, 'Render error: ' + e.message);
-
-            return;
-        }
-
-        banner.setState(this.#bannerManager.STATE.RENDERED, 'Banner was successfully rendered.');
-    }
-
-    #createIframeAndOptions(element, position) {
-        const options = AttributesParser.parseOptions(element);
+    #createIframe(element, position, resources, options) {
         const iframe = document.createElement('iframe');
+        const versionParam = `cv=${encodeURIComponent(this.version.semver)}`;
+        let src = element.dataset.ampEmbedSrc || this.#embedUrlFactory.create(position, resources, options);
+        src += -1 === src.indexOf('?') ? `?${versionParam}` : `&${versionParam}`;
 
         [...element.attributes].map(({ name, value }) => {
             iframe.setAttribute(name, value);
-        })
+        });
 
         iframe.width = '100%';
         iframe.height = '100%';
@@ -268,13 +265,16 @@ export class Client {
         iframe.scrolling = 'no';
         iframe.style.border = 'none';
         iframe.style.overflow = 'hidden';
-        iframe.src = element.dataset.ampEmbedSrc || this.#embedUrlFactory.create(position, AttributesParser.parseResources(element), options);
+        iframe.style.background = 'transparent';
+        iframe.style.visibility = 'hidden';
+        iframe.src = src;
+
         iframe.setAttribute('allowtransparency', 'true');
 
         if ('lazy' === options.loading) {
             iframe.loading = 'lazy';
         }
 
-        return { iframe, options };
+        return iframe;
     }
 }
diff --git a/src/frame/banner-frame-messenger.mjs b/src/frame/banner-frame-messenger.mjs
index 2f15642..e56f673 100644
--- a/src/frame/banner-frame-messenger.mjs
+++ b/src/frame/banner-frame-messenger.mjs
@@ -6,6 +6,7 @@ export class BannerFrameMessenger extends FrameMessenger {
     #connectionData;
     #bannerManager;
     #metricsSender;
+    #connectedBanners = [];
 
     /**
      * @param {String} origin
@@ -32,12 +33,28 @@ export class BannerFrameMessenger extends FrameMessenger {
         for (let message in handlers) {
             this.on(message, handlers[message].bind(this));
         }
+
+        window.addEventListener('resize', () => {
+            const banners = this.#bannerManager.getBannersByState({
+                state: this.#bannerManager.STATE.RENDERED,
+                managed: false,
+                external: false,
+                embed: true,
+            });
+
+            for (let banner of banners) {
+                this.sendToBanner(banner, 'windowResized', {
+                    windowWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+                })
+            }
+        });
     }
 
     connectBanner(embedBanner) {
         embedBanner.element.addEventListener('load', () => {
             const data = this.#connectionData;
             data.uid = embedBanner.uid;
+            data.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 
             this.sendToBanner(embedBanner, 'connect', data);
         });
@@ -52,6 +69,21 @@ export class BannerFrameMessenger extends FrameMessenger {
         );
     }
 
+    _beforeDispatch(message, { data }) {
+        const { uid } = data;
+
+        if (-1 === this.#connectedBanners.indexOf(uid)) {
+            const banner = this.#findBanner(uid);
+
+            if (banner) {
+                banner.element.style.visibility = 'visible';
+                this.#connectedBanners.push(uid);
+            }
+        }
+
+        return true;
+    }
+
     #onAdjustHeightMessage({ data }) {
         const banner = this.#findBanner(data.uid);
 
diff --git a/src/frame/frame-messenger.mjs b/src/frame/frame-messenger.mjs
index 818722e..ef57211 100644
--- a/src/frame/frame-messenger.mjs
+++ b/src/frame/frame-messenger.mjs
@@ -28,11 +28,20 @@ export class FrameMessenger {
             }
 
             const { message, data } = event.data;
-
-            this.#eventBus.dispatch(message, {
+            const args = {
                 data,
                 origin: event.origin,
-            });
+            };
+
+            if (!this._beforeDispatch(message, args)) {
+                return;
+            }
+
+            this.#eventBus.dispatch(message, args);
         }, false);
     }
+
+    _beforeDispatch() {
+        return true;
+    }
 }
diff --git a/src/interaction/banner-interaction-watcher.mjs b/src/interaction/banner-interaction-watcher.mjs
index f25204a..51646d8 100644
--- a/src/interaction/banner-interaction-watcher.mjs
+++ b/src/interaction/banner-interaction-watcher.mjs
@@ -76,18 +76,8 @@ export class BannerInteractionWatcher {
 
             // when fingerprint element is not attached yet
             if (undefined === element.dataset.ampBannerFingerprintObserved) {
-                // wait for all images to be completed or failed
-                Promise.all(
-                    [].slice.call(element.getElementsByTagName('img'))
-                        .filter(img => !img.complete)
-                        .map(img => new Promise(resolve => { img.onload = img.onerror = resolve; })),
-                ).then(() => {
-                    // prevent double observing
-                    if (undefined === element.dataset.ampBannerFingerprintObserved) {
-                        element.dataset.ampBannerFingerprintObserved = 'true';
-                        this.#intersectionObserver.observe(element);
-                    }
-                });
+                element.dataset.ampBannerFingerprintObserved = 'true';
+                this.#intersectionObserver.observe(element);
             }
 
             const linkElements = element.getElementsByTagName('a');
diff --git a/src/interaction/intersection-observer-factory.mjs b/src/interaction/intersection-observer-factory.mjs
index 373b5bc..2c49c9d 100644
--- a/src/interaction/intersection-observer-factory.mjs
+++ b/src/interaction/intersection-observer-factory.mjs
@@ -75,7 +75,7 @@ export class IntersectionObserverFactory {
                 }
 
                 if (!fingerprintMetadata.alreadyFullySeen) {
-                    const isFullyIntersecting = 1 <= entry.intersectionRatio;
+                    const isFullyIntersecting = 0.99 <= entry.intersectionRatio;
 
                     firstTimeFullySeenMetadata[fingerprint] = (!(fingerprint in firstTimeFullySeenMetadata) || (!firstTimeFullySeenMetadata[fingerprint].isFullyIntersecting && isFullyIntersecting))
                         ? { fingerprintArgs, fingerprintMetadata, isFullyIntersecting }
@@ -115,7 +115,7 @@ export class IntersectionObserverFactory {
                 eventBus.dispatch(Events.ON_BANNER_INTERSECTION_CHANGED, eventArgs);
             }
         }, {
-            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.99],
         });
     }
 }
diff --git a/src/request/embed-url-factory.mjs b/src/request/embed-url-factory.mjs
index 7f1eb6c..8a015ac 100644
--- a/src/request/embed-url-factory.mjs
+++ b/src/request/embed-url-factory.mjs
@@ -30,7 +30,14 @@ export class EmbedUrlFactory {
     }
 
     create(position, resources = {}, options = {}) {
-        const allResources = this.#defaultResources;
+        let allResources;
+
+        if ('1' !== (options['omit-default-resources'] || '0').toString()) {
+            allResources = { ...this.#defaultResources };
+        } else {
+            allResources = {};
+            delete options['omit-default-resources'];
+        }
 
         for (let key in resources) {
             const resource = new Resource(key, resources[key]);
@@ -47,7 +54,11 @@ export class EmbedUrlFactory {
         let resourcesParam = {};
 
         for (let key in allResources) {
-            resourcesParam[key] = allResources[key].value;
+            const value = allResources[key].value.filter(val => '' !== val);
+
+            if (value.length) {
+                resourcesParam[key] = allResources[key].value;
+            }
         }
 
         resourcesParam = JSON.stringify(resourcesParam);
diff --git a/src/request/request.mjs b/src/request/request.mjs
index f9246aa..a598506 100644
--- a/src/request/request.mjs
+++ b/src/request/request.mjs
@@ -17,7 +17,7 @@ export class Request {
         this.#headers = headers;
     }
 
-    addPosition(position, resources = []) {
+    addPosition(position, resources = [], applyDefaultResources = true) {
         const query = this.#query;
 
         if (position in query) {
@@ -26,7 +26,10 @@ export class Request {
 
         query[position] = {};
 
-        this.addPositionResources(position, this.#defaultResources);
+        if (applyDefaultResources) {
+            this.addPositionResources(position, this.#defaultResources);
+        }
+
         this.addPositionResources(position, resources);
     }
 
@@ -88,12 +91,17 @@ export class Request {
     }
 
     #parseQueryParameter = (query) => {
-        const json = Object.assign({}, query);
-        let position, resource;
+        const json = {};
+
+        for (let position in query) {
+            json[position] = {};
+
+            for (let resource in query[position]) {
+                const value = query[position][resource].value.filter(val => '' !== val);
 
-        for (position in json) {
-            for (resource in json[position]) {
-                json[position][resource] = json[position][resource].value;
+                if (value.length) {
+                    json[position][resource] = value;
+                }
             }
         }
 
diff --git a/src/utils/dom-helpers.mjs b/src/utils/dom-helpers.mjs
new file mode 100644
index 0000000..b7eeff4
--- /dev/null
+++ b/src/utils/dom-helpers.mjs
@@ -0,0 +1,23 @@
+export function getHtmlElement(el) {
+    if (el instanceof HTMLElement) {
+        return el;
+    }
+
+    if (typeof el !== 'string') {
+        throw new TypeError('Element must be instance of HTMLElement or String');
+    }
+
+    let htmlEl;
+
+    if ('#' === el.charAt(0)) {
+        htmlEl = document.getElementById(el.slice(1));
+    } else {
+        htmlEl = document.querySelector(el);
+    }
+
+    if (!(htmlEl instanceof HTMLElement)) {
+        throw new TypeError('Selector ' + el + ' is invalid.');
+    }
+
+    return htmlEl;
+}