Reflected AMP v2.16.0 API changes

68publishers · Oct 10, 2024 · ac15dc8 · ac15dc8
1 parent 9f10eab
commit ac15dc8
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - Changed arguments that are passed to the listeners `amp:banner:attached`, `amp:banner:state-changed`, `amp:fetch:error` and `amp:fetch:success`. Arguments are now passed as an object, so instead of `(banner) => {}` it is necessary to write `({ banner }) => {}`, respectively `({ response }) => {}` in case of events `amp:fetch:error` and `amp:fetch:success`.
+- Moved `dimensions` field from the `positionData` to the content object of type `img` according to changes in AMP v2.16.0 API changes.
 - Updated docs.
 
 ### Removed

diff --git a/src/banner/managed/banner-data.mjs b/src/banner/managed/banner-data.mjs
@@ -11,6 +11,10 @@ export class BannerData {
         this.#contents = new Contents(dimensionsProvider, breakpointType);
 
         for (let content of this.#data.contents) {
+            if ('img' === content.type && !('dimensions' in content)) { // BC compatibility
+                content.dimensions = { width: null, height: null };
+            }
+
             this.#contents.addContent(content['breakpoint'], content);
         }
     }

diff --git a/src/banner/managed/managed-banner.mjs b/src/banner/managed/managed-banner.mjs
@@ -197,7 +197,6 @@ export class ManagedBanner extends Banner {
             rotationSeconds: responseData['rotation_seconds'],
             displayType: responseData['display_type'],
             breakpointType: responseData['breakpoint_type'],
-            dimensions: responseData['dimensions'] || { width: null, height: null },
         });
 
         if ('options' in responseData) {

diff --git a/src/banner/position-data.mjs b/src/banner/position-data.mjs
@@ -6,19 +6,14 @@ export class PositionData {
      * @param {int} rotationSeconds
      * @param {string|null} displayType
      * @param {string|null} breakpointType
-     * @param {{width: int|null, height: int|null}} dimensions
      */
-    constructor({ id, code, name, rotationSeconds, displayType, breakpointType, dimensions }) {
+    constructor({ id, code, name, rotationSeconds, displayType, breakpointType }) {
         this.id = id;
         this.code = code;
         this.name = name;
         this.rotationSeconds = rotationSeconds;
         this.displayType = displayType;
         this.breakpointType = breakpointType;
-        this.dimensions = {
-            width: dimensions.width || null,
-            height: dimensions.height || null,
-        }
     }
 
     static createInitial(code) {
@@ -29,10 +24,6 @@ export class PositionData {
             rotationSeconds: 0,
             displayType: null,
             breakpointType: null,
-            dimensions: {
-                width: null,
-                height: null,
-            },
         });
     }
 
@@ -56,7 +47,6 @@ export class PositionData {
             rotationSeconds: this.rotationSeconds,
             displayType: this.displayType,
             breakpointType: this.breakpointType,
-            dimensions: this.dimensions,
         }
     }
 }
diff --git a/src/template/multiple.mjs b/src/template/multiple.mjs
@@ -23,8 +23,8 @@ export default `
                                      src="<%= b.content.src %>"
                                      sizes="<%- b.content.sizes %>"
                                      alt="<%- b.content.alt %>"
-                                     <% if(null !== banner.positionData.dimensions.width) { %>width="<%- banner.positionData.dimensions.width %>"<% } %>
-                                     <% if(null !== banner.positionData.dimensions.height) { %>height="<%- banner.positionData.dimensions.height %>"<% } %>
+                                     <% if(null !== b.content.dimensions.width) { %>width="<%- b.content.dimensions.width %>"<% } %>
+                                     <% if(null !== b.content.dimensions.height) { %>height="<%- b.content.dimensions.height %>"<% } %>
                                      <% if('' !== b.content.title) { %>title="<%- b.content.title %>"<% } %>
                                      <% var loading; if(loading = banner.options.evaluate('loading', index)) { %>loading="<%- loading %>"<% } %>
                                      <% var fetchPriority; if(fetchPriority = banner.options.evaluate('fetchpriority', index)) { %>fetchpriority="<%- fetchPriority %>"<% } %>>

diff --git a/src/template/random.mjs b/src/template/random.mjs
@@ -20,8 +20,8 @@ export default `
                          src="<%= data.content.src %>"
                          sizes="<%- data.content.sizes %>"
                          alt="<%- data.content.alt %>"
-                         <% if(null !== banner.positionData.dimensions.width) { %>width="<%- banner.positionData.dimensions.width %>"<% } %>
-                         <% if(null !== banner.positionData.dimensions.height) { %>height="<%- banner.positionData.dimensions.height %>"<% } %>
+                         <% if(null !== data.content.dimensions.width) { %>width="<%- data.content.dimensions.width %>"<% } %>
+                         <% if(null !== data.content.dimensions.height) { %>height="<%- data.content.dimensions.height %>"<% } %>
                          <% if('' !== data.content.title) { %>title="<%- data.content.title %>"<% } %>
                          <% var loading; if(loading = banner.options.evaluate('loading', 0)) { %>loading="<%- loading %>"<% } %>
                          <% var fetchPriority; if(fetchPriority = banner.options.evaluate('fetchpriority', 0)) { %>fetchpriority="<%- fetchPriority %>"<% } %>>

diff --git a/src/template/single.mjs b/src/template/single.mjs
@@ -20,8 +20,8 @@ export default `
                          src="<%= data.content.src %>"
                          sizes="<%- data.content.sizes %>"
                          alt="<%- data.content.alt %>"
-                         <% if(null !== banner.positionData.dimensions.width) { %>width="<%- banner.positionData.dimensions.width %>"<% } %>
-                         <% if(null !== banner.positionData.dimensions.height) { %>height="<%- banner.positionData.dimensions.height %>"<% } %>
+                         <% if(null !== data.content.dimensions.width) { %>width="<%- data.content.dimensions.width %>"<% } %>
+                         <% if(null !== data.content.dimensions.height) { %>height="<%- data.content.dimensions.height %>"<% } %>
                          <% if('' !== data.content.title) { %>title="<%- data.content.title %>"<% } %>
                          <% var loading; if(loading = banner.options.evaluate('loading', 0)) { %>loading="<%- loading %>"<% } %>
                          <% var fetchPriority; if(fetchPriority = banner.options.evaluate('fetchpriority', 0)) { %>fetchpriority="<%- fetchPriority %>"<% } %>>