Reflected AMP v2.16.0 API changes

CHANGELOG.md

@@ -14,6 +14,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

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);
  }
  }

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) {

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,
  }
  }
 }

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 %>"<% } %>>

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 %>"<% } %>>

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 %>"<% } %>>