@financial-times/ads-display - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

dist/adsData.js

@@ -5,2 +5,4 @@ 'use strict';
 
+require('@financial-times/o-viewport');
+
 /**
@@ -18,5 +20,10 @@ * Check if a variable is a plain object
  */
-const perfMark = name => {
+const perfMark = (name) => {
   /* istanbul ignore next */
-  const performance = window.LUX || window.performance || window.msPerformance || window.webkitPerformance || window.mozPerformance;
+  const performance =
+    window.LUX ||
+    window.performance ||
+    window.msPerformance ||
+    window.webkitPerformance ||
+    window.mozPerformance;
   if (performance && performance.mark) {
@@ -23,0 +30,0 @@ performance.clearMarks(name);

dist/client.js

 import oTracking from '@financial-times/o-tracking';
 import oAds from '@financial-times/ads-legacy-o-ads';
+import oViewport from '@financial-times/o-viewport';
 import { broadcast } from '@financial-times/n-tracking';
@@ -24,3 +25,7 @@ import { getUsPrivacyForTracking, setUSPrivacy } from '@financial-times/privacy-us-privacy';
  */
-const calculateViewportMargin = ({ breakpointMargins, viewportSize = window.innerWidth, fallbackValue = '0%' }) => {
+const calculateViewportMargin = ({
+  breakpointMargins,
+  viewportSize = window.innerWidth,
+  fallbackValue = '0%',
+}) => {
   if (!breakpointMargins || !viewportSize) {
@@ -33,5 +38,5 @@ return fallbackValue
     .sort()
-    .find(a => a > viewportSize);
+    .find((a) => a > viewportSize);
 
-  return breakpointMargins[nextHighestBreakpointKey] || fallbackValue;
+  return breakpointMargins[nextHighestBreakpointKey] || fallbackValue
 };
@@ -43,5 +48,10 @@
  */
-const perfMark = name => {
+const perfMark = (name) => {
   /* istanbul ignore next */
-  const performance = window.LUX || window.performance || window.msPerformance || window.webkitPerformance || window.mozPerformance;
+  const performance =
+    window.LUX ||
+    window.performance ||
+    window.msPerformance ||
+    window.webkitPerformance ||
+    window.mozPerformance;
   if (performance && performance.mark) {
@@ -53,2 +63,36 @@ performance.clearMarks(name);
 
+/**
+ * Use postMessage to address issue of media queries not applying to framed content
+ * 1. In the child window override the media query
+ * 2. Whenever the user's window is resized post a message to qualifying iframes
+ *     with an instruction to show or hide the image
+ *     Qualifying criteria: iframes whose source is `googlesyndication.com` and have loaded
+ *
+ * @param {number} collapseBelow - The breakpoint below which to hide images
+ */
+function hideIframedImagesBelow(collapseBelow = 600) {
+  /**
+   * @type {EventListener}
+   * @param {CustomEvent<{viewport: {width: number}}>} event
+   */
+  function onResize(event) {
+    const { width } = event.detail.viewport;
+    const hideImage = width < collapseBelow;
+    const targetOrigin = 'https://tpc.googlesyndication.com';
+    const adFrameSelector = `iframe[src^="${targetOrigin}"][data-load-complete="true"]`;
+
+    /** @type {NodeListOf<HTMLIFrameElement>} */
+    const iframes = document.querySelectorAll(adFrameSelector);
+    for (const iframe of iframes) {
+      if (iframe.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'resize', hideImage }, targetOrigin);
+      }
+    }
+  }
+
+  // @ts-ignore
+  document.body.addEventListener('oViewport.resize', onResize);
+  oViewport.listenTo('resize');
+}
+
 const DEFAULT_ADS_API_HOST = 'https://ads-api.ft.com/v2';
@@ -735,5 +779,5 @@
   getRootID,
-  enablePermutiveFtCom
+  enablePermutiveFtCom,
 };
 
-export { adsUtils, displayAds, formatArticleData, formatSmartmatchData, formatUserData, getAdsData };
+export { adsUtils, displayAds, formatArticleData, formatSmartmatchData, formatUserData, getAdsData, hideIframedImagesBelow };

package.json

 {
   "name": "@financial-times/ads-display",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Bring ads to your page with the FT specific o-ads configuration",
@@ -40,8 +40,8 @@ "browser": "dist/client.js",
   "dependencies": {
-    "@financial-times/ads-legacy-o-ads": "^3.2.0",
-    "@financial-times/ads-permutive": "^3.2.0",
+    "@financial-times/ads-legacy-o-ads": "^3.3.0",
+    "@financial-times/ads-moat-integration": "^3.3.0",
+    "@financial-times/ads-permutive": "^3.3.0",
     "@financial-times/n-tracking": "4.0.0",
     "@financial-times/o-tracking": "^4.0.0",
-    "@financial-times/privacy-us-privacy": "^1.0.0",
-    "@financial-times/ads-moat-integration": "^3.2.0"
+    "@financial-times/privacy-us-privacy": "^1.0.0"
   },
@@ -70,2 +70,3 @@ "devDependencies": {
   "peerDependencies": {
+    "@financial-times/o-viewport": "5.0.1",
     "react": "^16.12.0",
@@ -72,0 +73,0 @@ "react-dom": "^16.12.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52963

increased by2.9%

Lines of code

940

increased by5.26%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Added@financial-times/o-viewport@5.0.1(transitive)

• + Addedcore-js@3.39.0(transitive)

• - Removed@financial-times/o-viewport@5.1.2(transitive)

• - Removedcore-js@3.40.0(transitive)

• Updated@financial-times/ads-legacy-o-ads@^3.3.0

• Updated@financial-times/ads-moat-integration@^3.3.0

• Updated@financial-times/ads-permutive@^3.3.0