@twreporter/react-article-components 2.5.2-rc.1 → 2.5.2-rc.3

package/lib/components/body/embedded-code.js

@@ -15,6 +15,7 @@ var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
 var _color = require("@twreporter/core/lib/constants/color");
 var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
 var _theme = require("@twreporter/core/lib/constants/theme");
+var _excluded = ["isScrollingToAnchor"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -26,6 +27,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -80,6 +83,9 @@ function dispatchWindowLoadEvent() {
   }
   window.dispatchEvent(loadEvent);
 }
+var dispatchInlineScriptLoadEvent = function dispatchInlineScriptLoadEvent(scriptText) {
+  return "".concat(scriptText, "\n    // Manually trigger the load event on the script itself\n    const loadEvent = new Event('load');\n    document.currentScript.dispatchEvent(loadEvent); // Dispatches load event on this script element\n  ");
+};
 var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(EmbeddedCode, _React$PureComponent);
   var _super = _createSuper(EmbeddedCode);
@@ -94,38 +100,41 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "executeScript", function () {
       var node = _this._embedded.current;
       var scripts = _.get(_this.props, ['data', 'content', 0, 'scripts']);
-      if (node && Array.isArray(scripts)) {
-        var scriptsCount = scripts.length;
-        var loadScriptsCount = 0;
-        var scriptsFragment = new DocumentFragment(); // eslint-disable-line no-undef
-        _.forEach(scripts, function (script) {
-          var scriptEle = document.createElement('script');
-          var attribs = script.attribs;
-          _.forEach(attribs, function (value, name) {
-            try {
-              scriptEle.setAttribute(name, value);
-            } catch (err) {
-              console.error('Failed to set an attribute to the embbeded script.\n', "embedded element id: ".concat(_.get(_this.props, 'data.id', ''), "\n"), "attribute name: ".concat(name, "\n"), "attribute value: ".concat(value, "\n"), 'error:\n', err);
-            }
-          });
-          scriptEle.text = script.text || '';
-          // `dispatchWindowLoadEvent` is a workaround to trigger rendering of venngage infographics:
-          // The embedded venngage code (https://infograph.venngage.com/js/embed/v1/embed.js)
-          // will only initiate when `load` event on `window` is emitted.
-          // Hence, we need to emit the `load` event of `window` manually after all scripts are load.
-          var handleLoad = function handleLoad() {
-            loadScriptsCount += 1;
-            if (loadScriptsCount === scriptsCount) {
-              /* all scripts are load */
-              dispatchWindowLoadEvent();
-            }
-            scriptEle.removeEventListener('load', handleLoad);
-          };
-          scriptEle.addEventListener('load', handleLoad);
-          scriptsFragment.appendChild(scriptEle);
-        });
-        node.appendChild(scriptsFragment);
+      if (!node || !Array.isArray(scripts)) {
+        return;
       }
+      var scriptsCount = scripts.length;
+      var loadScriptsCount = 0;
+      var scriptsFragment = new DocumentFragment(); // eslint-disable-line no-undef
+      _.forEach(scripts, function (script, index) {
+        var scriptEle = document.createElement('script');
+        var attribs = script.attribs;
+        var isInlineScript = !attribs.src;
+        _.forEach(attribs, function (value, name) {
+          try {
+            scriptEle.setAttribute(name, value);
+          } catch (err) {
+            console.error('Failed to set an attribute to the embbeded script.\n', "embedded element id: ".concat(_.get(_this.props, 'data.id', ''), "\n"), "attribute name: ".concat(name, "\n"), "attribute value: ".concat(value, "\n"), 'error:\n', err);
+          }
+        });
+        scriptEle.text = (isInlineScript ? dispatchInlineScriptLoadEvent(script.text) : script.text) || '';
+        // `dispatchWindowLoadEvent` is a workaround to trigger rendering of venngage infographics:
+        // The embedded venngage code (https://infograph.venngage.com/js/embed/v1/embed.js)
+        // will only initiate when `load` event on `window` is emitted.
+        // Hence, we need to emit the `load` event of `window` manually after all scripts are load.
+        var handleLoad = function handleLoad() {
+          loadScriptsCount += 1;
+          if (loadScriptsCount === scriptsCount) {
+            /* all scripts are load */
+            dispatchWindowLoadEvent();
+            _this.props.handleFinishLoaded();
+          }
+          scriptEle.removeEventListener('load', handleLoad);
+        };
+        scriptEle.addEventListener('load', handleLoad);
+        scriptsFragment.appendChild(scriptEle);
+      });
+      node.appendChild(scriptsFragment);
     });
     _defineProperty(_assertThisInitialized(_this), "loadEmbed", function () {
       if (!_this.state.isLoaded) {
@@ -208,15 +217,18 @@ _defineProperty(EmbeddedCode, "propTypes", {
   className: _propTypes["default"].string,
   data: _body["default"].elementData,
   showCaption: _propTypes["default"].bool,
-  handleIsLoaded: _propTypes["default"].func
+  handleIsLoaded: _propTypes["default"].func,
+  handleFinishLoaded: _propTypes["default"].func
 });
 _defineProperty(EmbeddedCode, "defaultProps", {
   className: '',
   showCaption: true,
   handleIsLoaded: function handleIsLoaded() {}
 });
-var WayPointWrapper = function WayPointWrapper(props) {
-  var isScrollingToAnchor = props.isScrollingToAnchor;
+var WayPointWrapper = function WayPointWrapper(_ref) {
+  var _ref$isScrollingToAnc = _ref.isScrollingToAnchor,
+    isScrollingToAnchor = _ref$isScrollingToAnc === void 0 ? false : _ref$isScrollingToAnc,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isInViewPort = _useState2[0],
@@ -253,12 +265,7 @@ var WayPointWrapper = function WayPointWrapper(props) {
     }))))
   );
 };
-WayPointWrapper.defaultProps = {
-  isScrollingToAnchor: false,
-  showCaption: true
-};
 WayPointWrapper.propTypes = {
-  isScrollingToAnchor: _propTypes["default"].bool,
-  showCaption: _propTypes["default"].bool
+  isScrollingToAnchor: _propTypes["default"].bool
 };
 var _default = exports["default"] = WayPointWrapper;

package/lib/components/leading/embedded.js

@@ -101,8 +101,11 @@ var Embedded = function Embedded(_ref) {
   var onTopicClick = function onTopicClick() {
     navigate.push(topicHref);
   };
-  var handleIsLoaded = function handleIsLoaded() {
-    setIsLoading(false);
+  var handleFinishLoaded = function handleFinishLoaded() {
+    // add timeout before hidding loading to prevent content shifting
+    window.setTimeout(function () {
+      return setIsLoading(false);
+    }, 500);
   };
   (0, _react.useEffect)(function () {
     if (embedded.length > 0) {
@@ -124,15 +127,10 @@ var Embedded = function Embedded(_ref) {
       });
     }
   }, []);
-  (0, _react.useEffect)(function () {
-    window.addEventListener('load', handleIsLoaded, true);
-    return function () {
-      return window.removeEventListener('load', handleIsLoaded, true);
-    };
-  }, []);
   return /*#__PURE__*/_react["default"].createElement("div", null, isLoading ? /*#__PURE__*/_react["default"].createElement(LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(Loader, null)) : null, embeddedCode ? /*#__PURE__*/_react["default"].createElement(EmbeddedBlock, null, /*#__PURE__*/_react["default"].createElement(_embeddedCode["default"], {
     data: embeddedCode,
-    showCaption: !captionText
+    showCaption: !captionText,
+    handleFinishLoaded: handleFinishLoaded
   })) : null, /*#__PURE__*/_react["default"].createElement(ContentBlock, null, /*#__PURE__*/_react["default"].createElement(TitleBlock, null, isTopicPublished && shortTitle ? /*#__PURE__*/_react["default"].createElement(TopicTitle, {
     onClick: onTopicClick
   }, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.5.2-rc.1",
+  "version": "2.5.2-rc.3",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -41,5 +41,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "cd72caec5de2955a731c892ff958576561684a91"
+  "gitHead": "b0221e49ef87d15b3d934f3007700a2e51501e97"
 }