xfc - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

CHANGELOG.md

 Next Release
 -------------
+1.5.0
+------
+* Added support for calculating height of body containing absolute positioned elements.
+* Restored default height calculation back to bodyOffset.
+
 1.4.0
 ------
 * Added trigger for frame unloading. #18
-* Updated default height calucaltion to bodyScroll.
+* Updated default height calculation to bodyScroll.
 
@@ -8,0 +13,0 @@ 1.3.2

lib/lib/dimension.js

@@ -13,2 +13,4 @@ 'use strict';
 exports.calculateWidth = calculateWidth;
+exports.getOffsetToBody = getOffsetToBody;
+exports.getOffsetHeightToBody = getOffsetHeightToBody;
 
@@ -94,3 +96,3 @@ var _logger = require('./logger');
 function calculateHeight() {
-  var calMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bodyScroll';
+  var calMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bodyOffset';
 
@@ -110,2 +112,36 @@ if (!(calMethod in getHeight)) {
   return getWidth[calMethod]();
+}
+
+/**
+ * This function returns the offset height of the given node relative to the top of document.body
+ */
+function getOffsetToBody(node) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+  // If the given node is body or null, return 0
+  if (!node || node === window.document.body) {
+    return 0;
+  }
+
+  // Stops if the offset parent node is body;
+  // Otherwise keep searching up
+  // NOTE: offsetParent will return null on Webkit if the element is hidden
+  //       (the style.display of this element or any ancestor is "none") or
+  //       if the style.position of the element itself is set to "fixed"
+  //       See reference at https://developer.mozilla.org/en-US/docs/Web/API/HTMLelement/offsetParent#Compatibility
+  var calculatedOffset = node.offsetTop + offset;
+  var offsetParent = node.offsetParent;
+
+  if (offsetParent === window.document.body) {
+    return calculatedOffset;
+  }
+
+  return getOffsetToBody(offsetParent, calculatedOffset);
+}
+
+/**
+ * This function returns the offset height of the given node relative to the top of document.body
+ */
+function getOffsetHeightToBody(node) {
+  return !node ? 0 : getOffsetToBody(node) + node.offsetHeight;
 }

lib/provider/application.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
 var _promise = require('babel-runtime/core-js/promise');
@@ -67,2 +71,12 @@
     key: 'init',
+
+    /**
+     * init method
+     * @param  options.acls            An array that contains white listed origins
+     * @param  options.secret          A string or function used for authorization with Consumer
+     * @param  options.onReady         A function that will be called after App is authorized
+     * @param  options.targetSelectors A DOMString containing one or more selectors to match against.
+     *                                 This string must be a valid CSS selector string; if it's not,
+     *                                 a SyntaxError exception is thrown.
+     */
     value: function init(_ref) {
@@ -74,3 +88,5 @@ var _ref$acls = _ref.acls,
           _ref$onReady = _ref.onReady,
-          onReady = _ref$onReady === undefined ? null : _ref$onReady;
+          onReady = _ref$onReady === undefined ? null : _ref$onReady,
+          _ref$targetSelectors = _ref.targetSelectors,
+          targetSelectors = _ref$targetSelectors === undefined ? '' : _ref$targetSelectors;
 
@@ -80,2 +96,3 @@ this.acls = [].concat(acls);
       this.onReady = onReady;
+      this.targetSelectors = targetSelectors;
       this.resizeConfig = null;
@@ -140,2 +157,16 @@ this.requestResize = this.requestResize.bind(this);
         var height = (0, _dimension.calculateHeight)(this.resizeConfig.heightCalculationMethod);
+
+        // If targetSelectors is specified from Provider or Consumer or both,
+        // need to calculate the height based on specified target selectors
+        if (this.targetSelectors || this.resizeConfig.targetSelectors) {
+          // Combines target selectors from two sources
+          var targetSelectors = [this.targetSelectors, this.resizeConfig.targetSelectors].filter(function (val) {
+            return val;
+          }).join(', ');
+
+          var heights = [].slice.call(document.querySelectorAll(targetSelectors)).map(_dimension.getOffsetHeightToBody);
+
+          height = Math.max.apply(Math, (0, _toConsumableArray3.default)(heights).concat([height]));
+        }
+
         this.JSONRPC.notification('resize', [height + 'px']);
@@ -142,0 +173,0 @@ }

package.json

 {
   "name": "xfc",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A Cross Frame Container that handles securely embedding web content into a 3rd party domain",
@@ -5,0 +5,0 @@ "author": "Cerner Corporation",

README.md

@@ -80,2 +80,3 @@ # XFC (Cross-Frame-Container)
 | customCalculationMethod | function | null           | When specified, XFC will use the given method to update iframe's size when necessary (e.g. dom changes, window resized, etc.)<br><br> NOTE: context `this` is provided as iframe to this method, so in the method you can access the iframe by accessing `this` |
+| targetSelectors         | string   | null           | When the embedded page contains elements styled with `position: absolute`, the iframe resizing logic won't calculate the height of the embedded page correctly because those elements are removed from normal document flow.<br><br>In this case, targetSelectors can be used to specify those absolute positioned elements so that they will be taken into consideration when calculating the height of the embedded page. Multiple selectors may be specified by separating them using commas.<br><br>If not specified, normal resizing logic will be used.<br><br> NOTE: this attribute can be also specified from Provider's side, e.g. `XFC.Provider.init({targetSelectors: '#target'})`|
 
@@ -82,0 +83,0 @@

src/lib/dimension.js

@@ -52,3 +52,3 @@ import logger from './logger';
 
-export function calculateHeight(calMethod = 'bodyScroll') {
+export function calculateHeight(calMethod = 'bodyOffset') {
   if (!(calMethod in getHeight)) {
@@ -66,1 +66,33 @@ logger.error(`'${calMethod}' is not a valid method name!`);
 }
+
+/**
+ * This function returns the offset height of the given node relative to the top of document.body
+ */
+export function getOffsetToBody(node, offset = 0) {
+  // If the given node is body or null, return 0
+  if (!node || node === window.document.body) {
+    return 0;
+  }
+
+  // Stops if the offset parent node is body;
+  // Otherwise keep searching up
+  // NOTE: offsetParent will return null on Webkit if the element is hidden
+  //       (the style.display of this element or any ancestor is "none") or
+  //       if the style.position of the element itself is set to "fixed"
+  //       See reference at https://developer.mozilla.org/en-US/docs/Web/API/HTMLelement/offsetParent#Compatibility
+  const calculatedOffset = node.offsetTop + offset;
+  const offsetParent = node.offsetParent;
+
+  if (offsetParent === window.document.body) {
+    return calculatedOffset;
+  }
+
+  return getOffsetToBody(offsetParent, calculatedOffset);
+}
+
+/**
+ * This function returns the offset height of the given node relative to the top of document.body
+ */
+export function getOffsetHeightToBody(node) {
+  return !node ? 0 : getOffsetToBody(node) + node.offsetHeight;
+}

src/provider/application.js

@@ -6,3 +6,3 @@ import JSONRPC from 'jsonrpc-dispatch';
 import logger from '../lib/logger';
-import { calculateHeight, calculateWidth } from '../lib/dimension';
+import { getOffsetHeightToBody, calculateHeight, calculateWidth } from '../lib/dimension';
 import MutationObserver from 'mutation-observer';
@@ -13,6 +13,16 @@
 class Application extends EventEmitter {
-  init({ acls = [], secret = null, onReady = null }) {
+  /**
+   * init method
+   * @param  options.acls            An array that contains white listed origins
+   * @param  options.secret          A string or function used for authorization with Consumer
+   * @param  options.onReady         A function that will be called after App is authorized
+   * @param  options.targetSelectors A DOMString containing one or more selectors to match against.
+   *                                 This string must be a valid CSS selector string; if it's not,
+   *                                 a SyntaxError exception is thrown.
+   */
+  init({ acls = [], secret = null, onReady = null, targetSelectors = '' }) {
     this.acls = [].concat(acls);
     this.secret = secret;
     this.onReady = onReady;
+    this.targetSelectors = targetSelectors;
     this.resizeConfig = null;
@@ -78,3 +88,18 @@ this.requestResize = this.requestResize.bind(this);
     } else {
-      const height = calculateHeight(this.resizeConfig.heightCalculationMethod);
+      let height = calculateHeight(this.resizeConfig.heightCalculationMethod);
+
+      // If targetSelectors is specified from Provider or Consumer or both,
+      // need to calculate the height based on specified target selectors
+      if (this.targetSelectors || this.resizeConfig.targetSelectors) {
+        // Combines target selectors from two sources
+        const targetSelectors = [this.targetSelectors, this.resizeConfig.targetSelectors]
+          .filter(val => val)
+          .join(', ');
+
+        const heights = [].slice.call(document.querySelectorAll(targetSelectors))
+          .map(getOffsetHeightToBody);
+
+        height = Math.max(...heights, height);
+      }
+
       this.JSONRPC.notification('resize', [`${height}px`]);
@@ -81,0 +106,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

82559

increased by8.13%

Lines of code

1461

increased by7.51%

Number of lines in readme file

256

increased by0.39%

No dependency changes