@twreporter/react-article-components 2.2.0-rc.0 → 2.2.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/lib/components/article-page.js +39 -108
- package/lib/components/aside/desktop-aside.js +25 -65
- package/lib/components/aside/desktop-tools.js +11 -57
- package/lib/components/aside/metadata.js +22 -89
- package/lib/components/aside/mobile-tool-bar.js +79 -175
- package/lib/components/aside/utils/theme.js +5 -11
- package/lib/components/body/annotation.js +15 -73
- package/lib/components/body/audio/audio-contexts.js +4 -16
- package/lib/components/body/audio/audio-provider.js +13 -48
- package/lib/components/body/audio/control-button.js +4 -28
- package/lib/components/body/audio/index.js +10 -56
- package/lib/components/body/audio/seek-bar.js +6 -23
- package/lib/components/body/audio/time.js +0 -6
- package/lib/components/body/blockquote.js +11 -52
- package/lib/components/body/brief.js +10 -55
- package/lib/components/body/centered-quote.js +10 -52
- package/lib/components/body/embedded-code.js +22 -101
- package/lib/components/body/headings.js +6 -23
- package/lib/components/body/image-diff.js +13 -66
- package/lib/components/body/image.js +11 -46
- package/lib/components/body/index.js +21 -118
- package/lib/components/body/infobox.js +13 -58
- package/lib/components/body/list.js +8 -29
- package/lib/components/body/multimedia.js +10 -29
- package/lib/components/body/paragraph.js +5 -23
- package/lib/components/body/slider/index.js +28 -96
- package/lib/components/body/slideshow/index.js +36 -107
- package/lib/components/body/tracking-section.js +7 -46
- package/lib/components/body/youtube.js +8 -41
- package/lib/components/donation-box.js +10 -44
- package/lib/components/img-with-placeholder/index.js +34 -106
- package/lib/components/leading/extend.js +6 -25
- package/lib/components/leading/fullscreen.js +17 -63
- package/lib/components/leading/index.js +2 -10
- package/lib/components/leading/normal.js +19 -64
- package/lib/components/leading/pink.js +20 -59
- package/lib/components/leading/small.js +6 -25
- package/lib/components/license.js +9 -40
- package/lib/components/link.js +8 -37
- package/lib/components/related/card.js +20 -73
- package/lib/components/related/index.js +25 -71
- package/lib/components/related/list.js +16 -70
- package/lib/components/related/mockup.js +10 -12
- package/lib/components/separation-curve.js +0 -15
- package/lib/components/table-of-contents/index.js +17 -46
- package/lib/components/table-of-contents/styled.js +10 -38
- package/lib/constants/anchor.js +4 -8
- package/lib/constants/css.js +2 -15
- package/lib/constants/element-alignment.js +2 -3
- package/lib/constants/prop-types/article-page.js +2 -7
- package/lib/constants/prop-types/aside.js +2 -8
- package/lib/constants/prop-types/body.js +4 -9
- package/lib/constants/prop-types/img-with-placeholder.js +2 -7
- package/lib/constants/prop-types/leading.js +8 -13
- package/lib/constants/prop-types/related.js +2 -7
- package/lib/constants/theme.js +2 -3
- package/lib/constants/typography.js +2 -5
- package/lib/contexts/dynamic-components-context.js +2 -8
- package/lib/managers/layout-manager.js +13 -28
- package/lib/managers/theme-manager.js +13 -32
- package/lib/managers/ui-manager.js +14 -26
- package/lib/utils/image.js +5 -14
- package/package.json +6 -6
|
@@ -1,124 +1,86 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
8
|
var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
|
|
13
|
-
|
|
14
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
-
|
|
16
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
17
|
-
|
|
18
11
|
var _css = _interopRequireDefault(require("../../constants/css"));
|
|
19
|
-
|
|
20
12
|
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
21
|
-
|
|
22
13
|
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
23
|
-
|
|
24
14
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
25
|
-
|
|
26
15
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
27
|
-
|
|
28
|
-
function
|
|
29
|
-
|
|
30
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
-
|
|
16
|
+
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); }
|
|
17
|
+
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; }
|
|
32
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
33
|
-
|
|
19
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
34
20
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
35
|
-
|
|
36
|
-
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, descriptor.key, descriptor); } }
|
|
37
|
-
|
|
21
|
+
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); } }
|
|
38
22
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
39
|
-
|
|
40
23
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
41
|
-
|
|
42
24
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
43
|
-
|
|
44
25
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
45
|
-
|
|
46
26
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
47
|
-
|
|
48
27
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
49
|
-
|
|
50
28
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
51
|
-
|
|
52
29
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
53
|
-
|
|
54
|
-
function
|
|
55
|
-
|
|
30
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
31
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
32
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // lodash
|
|
56
33
|
var _ = {
|
|
57
34
|
get: _get["default"]
|
|
58
35
|
};
|
|
59
|
-
|
|
60
36
|
var QuoteContent = /*#__PURE__*/_styledComponents["default"].blockquote.withConfig({
|
|
61
37
|
displayName: "centered-quote__QuoteContent",
|
|
62
38
|
componentId: "oc409x-0"
|
|
63
39
|
})(["white-space:pre-wrap;margin:0;font-weight:", ";font-size:", "px;line-height:1.56;letter-spacing:1.1px;text-align:center;"], _typography["default"].font.weight.normal, function (props) {
|
|
64
40
|
return props.theme.fontSizeOffset + 32;
|
|
65
41
|
});
|
|
66
|
-
|
|
67
42
|
var QuoteBy = /*#__PURE__*/_styledComponents["default"].cite.withConfig({
|
|
68
43
|
displayName: "centered-quote__QuoteBy",
|
|
69
44
|
componentId: "oc409x-1"
|
|
70
45
|
})(["margin:25px auto 0 auto;display:block;font-style:normal;font-weight:", ";font-size:", "px;line-height:1.56;letter-spacing:0.5px;text-align:center;", ""], _typography["default"].font.weight.normal, function (props) {
|
|
71
46
|
return props.theme.fontSizeOffset + 16;
|
|
72
47
|
}, _css["default"].linkChildren);
|
|
73
|
-
|
|
74
48
|
var VerticalLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
75
49
|
displayName: "centered-quote__VerticalLine",
|
|
76
50
|
componentId: "oc409x-2"
|
|
77
51
|
})(["width:2px;height:80px;margin:0 auto 40px auto;"]);
|
|
78
|
-
|
|
79
52
|
var QuoteContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
80
53
|
displayName: "centered-quote__QuoteContainer",
|
|
81
54
|
componentId: "oc409x-3"
|
|
82
55
|
})(["", ""], function (props) {
|
|
83
56
|
return getQuoteContainerStyles(props.theme.name);
|
|
84
57
|
});
|
|
85
|
-
|
|
86
58
|
function getQuoteContainerStyles(themeName) {
|
|
87
59
|
switch (themeName) {
|
|
88
60
|
case _theme["default"].article.v2.pink:
|
|
89
61
|
return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color.colorGrayscale.gray800, VerticalLine, _color.COLOR_PINK_ARTICLE.pink);
|
|
90
|
-
|
|
91
62
|
case _theme["default"].article.v2.photo:
|
|
92
63
|
return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color.colorGrayscale.gray300, VerticalLine, _color.colorSupportive.heavy);
|
|
93
|
-
|
|
94
64
|
case _theme["default"].article.v2["default"]:
|
|
95
65
|
default:
|
|
96
66
|
return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color.colorGrayscale.gray800, VerticalLine, _color.colorSupportive.main);
|
|
97
67
|
}
|
|
98
68
|
}
|
|
99
|
-
|
|
100
|
-
var CenteredQuote = /*#__PURE__*/function (_PureComponent) {
|
|
69
|
+
var CenteredQuote = exports["default"] = /*#__PURE__*/function (_PureComponent) {
|
|
101
70
|
_inherits(CenteredQuote, _PureComponent);
|
|
102
|
-
|
|
103
71
|
var _super = _createSuper(CenteredQuote);
|
|
104
|
-
|
|
105
72
|
function CenteredQuote() {
|
|
106
73
|
_classCallCheck(this, CenteredQuote);
|
|
107
|
-
|
|
108
74
|
return _super.apply(this, arguments);
|
|
109
75
|
}
|
|
110
|
-
|
|
111
76
|
_createClass(CenteredQuote, [{
|
|
112
77
|
key: "render",
|
|
113
78
|
value: function render() {
|
|
114
79
|
var _this$props = this.props,
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
80
|
+
className = _this$props.className,
|
|
81
|
+
data = _this$props.data;
|
|
118
82
|
var content = _.get(data, ['content', 0, 'quote']);
|
|
119
|
-
|
|
120
83
|
var by = _.get(data, ['content', 0, 'quoteBy']);
|
|
121
|
-
|
|
122
84
|
return content ? /*#__PURE__*/_react["default"].createElement(QuoteContainer, {
|
|
123
85
|
className: className
|
|
124
86
|
}, /*#__PURE__*/_react["default"].createElement(VerticalLine, null), /*#__PURE__*/_react["default"].createElement(QuoteContent, {
|
|
@@ -132,12 +94,8 @@ var CenteredQuote = /*#__PURE__*/function (_PureComponent) {
|
|
|
132
94
|
}) : null) : null;
|
|
133
95
|
}
|
|
134
96
|
}]);
|
|
135
|
-
|
|
136
97
|
return CenteredQuote;
|
|
137
98
|
}(_react.PureComponent);
|
|
138
|
-
|
|
139
|
-
exports["default"] = CenteredQuote;
|
|
140
|
-
|
|
141
99
|
_defineProperty(CenteredQuote, "propTypes", {
|
|
142
100
|
className: _propTypes["default"].string,
|
|
143
101
|
data: _body["default"].elementData.isRequired
|
|
@@ -1,76 +1,46 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports["default"] = exports.Caption = exports.Block = void 0;
|
|
9
|
-
|
|
10
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
|
|
16
10
|
var _reactWaypoint = require("react-waypoint");
|
|
17
|
-
|
|
18
11
|
var _forEach = _interopRequireDefault(require("lodash/forEach"));
|
|
19
|
-
|
|
20
12
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
21
|
-
|
|
22
13
|
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
23
|
-
|
|
24
14
|
var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
|
|
25
|
-
|
|
26
15
|
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
27
|
-
|
|
28
16
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
29
|
-
|
|
30
17
|
var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
|
|
31
|
-
|
|
32
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
33
|
-
|
|
34
|
-
function
|
|
35
|
-
|
|
36
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
|
-
|
|
19
|
+
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); }
|
|
20
|
+
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; }
|
|
21
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
38
22
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
39
|
-
|
|
40
23
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
41
|
-
|
|
42
24
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
43
|
-
|
|
44
25
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
45
|
-
|
|
46
|
-
function
|
|
47
|
-
|
|
48
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
49
|
-
|
|
26
|
+
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; }
|
|
27
|
+
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; } }
|
|
50
28
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
51
|
-
|
|
52
29
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
53
|
-
|
|
54
|
-
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, descriptor.key, descriptor); } }
|
|
55
|
-
|
|
30
|
+
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); } }
|
|
56
31
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
57
|
-
|
|
58
32
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
59
|
-
|
|
60
33
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
61
|
-
|
|
62
34
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
63
|
-
|
|
64
35
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
65
|
-
|
|
66
36
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
67
|
-
|
|
68
37
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
69
|
-
|
|
70
38
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
71
|
-
|
|
72
|
-
function
|
|
73
|
-
|
|
39
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
40
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
41
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // lodash
|
|
42
|
+
// constants
|
|
43
|
+
// twreporter
|
|
74
44
|
var _ = {
|
|
75
45
|
forEach: _forEach["default"],
|
|
76
46
|
get: _get["default"],
|
|
@@ -81,77 +51,56 @@ var embedNamespace = {
|
|
|
81
51
|
twreporter: '__twreporterEmbeddedData',
|
|
82
52
|
storyTellingReporter: '@story-telling-reporter'
|
|
83
53
|
};
|
|
84
|
-
|
|
85
|
-
var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
54
|
+
var Block = exports.Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
86
55
|
displayName: "embedded-code__Block",
|
|
87
56
|
componentId: "tkafgt-0"
|
|
88
57
|
})(["position:relative;z-index:", ";img.img-responsive{margin:0 auto;max-width:100%;height:auto;display:block;}"], function (props) {
|
|
89
58
|
return props.$shouldEscalateZIndex ? _zIndex["default"].embedUp : _zIndex["default"].embedDown;
|
|
90
59
|
});
|
|
91
|
-
|
|
92
|
-
exports.Block = Block;
|
|
93
|
-
|
|
94
|
-
var Caption = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
60
|
+
var Caption = exports.Caption = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
95
61
|
displayName: "embedded-code__Caption",
|
|
96
62
|
componentId: "tkafgt-1"
|
|
97
63
|
})(["line-height:1.43;letter-spacing:0.4px;font-size:14px;color:", ";padding:15px 15px 0 15px;"], function (props) {
|
|
98
64
|
switch (props.theme.name) {
|
|
99
65
|
case _theme["default"].article.v2.photo:
|
|
100
66
|
return _color.colorGrayscale.gray300;
|
|
101
|
-
|
|
102
67
|
case _theme["default"].article.v2.pink:
|
|
103
68
|
case _theme["default"].article.v2["default"]:
|
|
104
69
|
default:
|
|
105
70
|
return _color.colorGrayscale.gray600;
|
|
106
71
|
}
|
|
107
72
|
});
|
|
108
|
-
|
|
109
|
-
exports.Caption = Caption;
|
|
110
|
-
|
|
111
73
|
function dispatchWindowLoadEvent() {
|
|
112
74
|
var loadEvent;
|
|
113
|
-
|
|
114
75
|
try {
|
|
115
76
|
loadEvent = new Event('load'); // eslint-disable-line no-undef
|
|
116
77
|
} catch (err) {
|
|
117
78
|
loadEvent = document.createEvent('Event');
|
|
118
79
|
loadEvent.initEvent('load', true, true);
|
|
119
80
|
}
|
|
120
|
-
|
|
121
81
|
window.dispatchEvent(loadEvent);
|
|
122
82
|
}
|
|
123
|
-
|
|
124
83
|
var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
|
|
125
84
|
_inherits(EmbeddedCode, _React$PureComponent);
|
|
126
|
-
|
|
127
85
|
var _super = _createSuper(EmbeddedCode);
|
|
128
|
-
|
|
129
86
|
function EmbeddedCode(props) {
|
|
130
87
|
var _this;
|
|
131
|
-
|
|
132
88
|
_classCallCheck(this, EmbeddedCode);
|
|
133
|
-
|
|
134
89
|
_this = _super.call(this, props);
|
|
135
|
-
|
|
136
90
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
137
91
|
isLoaded: false,
|
|
138
92
|
shouldEscalateZIndex: false
|
|
139
93
|
});
|
|
140
|
-
|
|
141
94
|
_defineProperty(_assertThisInitialized(_this), "executeScript", function () {
|
|
142
95
|
var node = _this._embedded.current;
|
|
143
|
-
|
|
144
96
|
var scripts = _.get(_this.props, ['data', 'content', 0, 'scripts']);
|
|
145
|
-
|
|
146
97
|
if (node && Array.isArray(scripts)) {
|
|
147
98
|
var scriptsCount = scripts.length;
|
|
148
99
|
var loadScriptsCount = 0;
|
|
149
100
|
var scriptsFragment = new DocumentFragment(); // eslint-disable-line no-undef
|
|
150
|
-
|
|
151
101
|
_.forEach(scripts, function (script) {
|
|
152
102
|
var scriptEle = document.createElement('script');
|
|
153
103
|
var attribs = script.attribs;
|
|
154
|
-
|
|
155
104
|
_.forEach(attribs, function (value, name) {
|
|
156
105
|
try {
|
|
157
106
|
scriptEle.setAttribute(name, value);
|
|
@@ -159,31 +108,25 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
159
108
|
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);
|
|
160
109
|
}
|
|
161
110
|
});
|
|
162
|
-
|
|
163
|
-
|
|
111
|
+
scriptEle.text = script.text || '';
|
|
112
|
+
// `dispatchWindowLoadEvent` is a workaround to trigger rendering of venngage infographics:
|
|
164
113
|
// The embedded venngage code (https://infograph.venngage.com/js/embed/v1/embed.js)
|
|
165
114
|
// will only initiate when `load` event on `window` is emitted.
|
|
166
115
|
// Hence, we need to emit the `load` event of `window` manually after all scripts are load.
|
|
167
|
-
|
|
168
116
|
var handleLoad = function handleLoad() {
|
|
169
117
|
loadScriptsCount += 1;
|
|
170
|
-
|
|
171
118
|
if (loadScriptsCount === scriptsCount) {
|
|
172
119
|
/* all scripts are load */
|
|
173
120
|
dispatchWindowLoadEvent();
|
|
174
121
|
}
|
|
175
|
-
|
|
176
122
|
scriptEle.removeEventListener('load', handleLoad);
|
|
177
123
|
};
|
|
178
|
-
|
|
179
124
|
scriptEle.addEventListener('load', handleLoad);
|
|
180
125
|
scriptsFragment.appendChild(scriptEle);
|
|
181
126
|
});
|
|
182
|
-
|
|
183
127
|
node.appendChild(scriptsFragment);
|
|
184
128
|
}
|
|
185
129
|
});
|
|
186
|
-
|
|
187
130
|
_defineProperty(_assertThisInitialized(_this), "loadEmbed", function () {
|
|
188
131
|
if (!_this.state.isLoaded) {
|
|
189
132
|
_this.setState({
|
|
@@ -191,25 +134,20 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
191
134
|
}, _this.executeScript);
|
|
192
135
|
}
|
|
193
136
|
});
|
|
194
|
-
|
|
195
137
|
_this._embedded = /*#__PURE__*/_react["default"].createRef();
|
|
196
|
-
|
|
197
138
|
var _$get = _.get(_this.props, ['data', 'content', 0], {}),
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
139
|
+
caption = _$get.caption,
|
|
140
|
+
embeddedCode = _$get.embeddedCode,
|
|
141
|
+
embeddedCodeWithoutScript = _$get.embeddedCodeWithoutScript;
|
|
202
142
|
_this._caption = caption;
|
|
203
143
|
_this._embeddedCodeWithoutScript = embeddedCodeWithoutScript;
|
|
204
144
|
_this._embeddedCode = embeddedCode;
|
|
205
145
|
return _this;
|
|
206
146
|
}
|
|
207
|
-
|
|
208
147
|
_createClass(EmbeddedCode, [{
|
|
209
148
|
key: "componentDidMount",
|
|
210
149
|
value: function componentDidMount() {
|
|
211
150
|
var _this$_embeddedCode, _this$_embeddedCode2;
|
|
212
|
-
|
|
213
151
|
// !! WORKAROUND !!
|
|
214
152
|
// After upgrading to react v18,
|
|
215
153
|
// `EmbeddedCode` component becomes abnormal.
|
|
@@ -242,10 +180,8 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
242
180
|
key: "render",
|
|
243
181
|
value: function render() {
|
|
244
182
|
var _this$_embeddedCodeWi;
|
|
245
|
-
|
|
246
183
|
var className = this.props.className;
|
|
247
184
|
var shouldEscalateZIndex = this.state.shouldEscalateZIndex;
|
|
248
|
-
|
|
249
185
|
var embed = /*#__PURE__*/_react["default"].createElement("div", {
|
|
250
186
|
className: className
|
|
251
187
|
}, /*#__PURE__*/_react["default"].createElement(Block, {
|
|
@@ -255,57 +191,44 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
255
191
|
__html: this._embeddedCodeWithoutScript
|
|
256
192
|
}
|
|
257
193
|
}), this._caption ? /*#__PURE__*/_react["default"].createElement(Caption, null, this._caption) : null);
|
|
258
|
-
|
|
259
194
|
if ((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(embedNamespace.infogram)) {
|
|
260
195
|
return this.state.isLoaded ? embed : null;
|
|
261
196
|
}
|
|
262
|
-
|
|
263
197
|
return embed;
|
|
264
198
|
}
|
|
265
199
|
}]);
|
|
266
|
-
|
|
267
200
|
return EmbeddedCode;
|
|
268
201
|
}(_react["default"].PureComponent); // Serious layout shifts show up when loading bunch of infograms due to lack of heights,
|
|
269
202
|
// so here we apply waypoint wrapper to load infogram dynamically to avoid layout shifts for anchors.
|
|
270
203
|
// https://twreporter-org.atlassian.net/browse/TWREPORTER-60
|
|
271
|
-
|
|
272
|
-
|
|
273
204
|
_defineProperty(EmbeddedCode, "propTypes", {
|
|
274
205
|
className: _propTypes["default"].string,
|
|
275
206
|
data: _body["default"].elementData
|
|
276
207
|
});
|
|
277
|
-
|
|
278
208
|
_defineProperty(EmbeddedCode, "defaultProps", {
|
|
279
209
|
className: ''
|
|
280
210
|
});
|
|
281
|
-
|
|
282
211
|
var WayPointWrapper = function WayPointWrapper(props) {
|
|
283
212
|
var isScrollingToAnchor = props.isScrollingToAnchor;
|
|
284
|
-
|
|
285
213
|
var _useState = (0, _react.useState)(false),
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
214
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
215
|
+
isInViewPort = _useState2[0],
|
|
216
|
+
setIsInViewPort = _useState2[1];
|
|
290
217
|
var embedRef = (0, _react.useRef)(null);
|
|
291
218
|
(0, _react.useEffect)(function () {
|
|
292
219
|
if (!isScrollingToAnchor && isInViewPort) {
|
|
293
220
|
embedRef.current.loadEmbed();
|
|
294
221
|
}
|
|
295
222
|
}, [isScrollingToAnchor]);
|
|
296
|
-
|
|
297
223
|
var onEnter = function onEnter() {
|
|
298
224
|
setIsInViewPort(true);
|
|
299
|
-
|
|
300
225
|
if (!isScrollingToAnchor) {
|
|
301
226
|
embedRef.current.loadEmbed();
|
|
302
227
|
}
|
|
303
228
|
};
|
|
304
|
-
|
|
305
229
|
var onLeave = function onLeave() {
|
|
306
230
|
setIsInViewPort(false);
|
|
307
231
|
};
|
|
308
|
-
|
|
309
232
|
return (
|
|
310
233
|
/*#__PURE__*/
|
|
311
234
|
// Note: When an anchor is exactly below an infogram embed, onLeave() is not fired
|
|
@@ -323,12 +246,10 @@ var WayPointWrapper = function WayPointWrapper(props) {
|
|
|
323
246
|
}))))
|
|
324
247
|
);
|
|
325
248
|
};
|
|
326
|
-
|
|
327
249
|
WayPointWrapper.defaultProps = {
|
|
328
250
|
isScrollingToAnchor: false
|
|
329
251
|
};
|
|
330
252
|
WayPointWrapper.propTypes = {
|
|
331
253
|
isScrollingToAnchor: _propTypes["default"].bool
|
|
332
254
|
};
|
|
333
|
-
var _default = WayPointWrapper;
|
|
334
|
-
exports["default"] = _default;
|
|
255
|
+
var _default = exports["default"] = WayPointWrapper;
|
|
@@ -1,31 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
4
|
-
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
13
|
-
|
|
14
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
15
|
-
|
|
16
11
|
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
17
|
-
|
|
18
12
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
19
|
-
|
|
20
13
|
var _headline = require("@twreporter/react-components/lib/text/headline");
|
|
21
|
-
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
-
|
|
14
|
+
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); }
|
|
15
|
+
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
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
27
|
-
|
|
28
17
|
// @twreporter
|
|
18
|
+
|
|
29
19
|
var _ = {
|
|
30
20
|
get: _get["default"]
|
|
31
21
|
};
|
|
@@ -33,7 +23,6 @@ var heading = /*#__PURE__*/(0, _styledComponents.css)(["margin:0;color:", ";"],
|
|
|
33
23
|
switch (props.theme.name) {
|
|
34
24
|
case _theme["default"].article.v2.photo:
|
|
35
25
|
return _color.colorGrayscale.gray300;
|
|
36
|
-
|
|
37
26
|
case _theme["default"].article.v2.pink:
|
|
38
27
|
case _theme["default"].article.v2["default"]:
|
|
39
28
|
default:
|
|
@@ -48,29 +37,23 @@ var StyledH2 = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H3).with
|
|
|
48
37
|
displayName: "headings__StyledH2",
|
|
49
38
|
componentId: "sc-1hpcjc2-1"
|
|
50
39
|
})(["", ""], heading);
|
|
51
|
-
|
|
52
40
|
var H1 = function H1(props) {
|
|
53
41
|
var content = _.get(props, 'data.content.0', '');
|
|
54
|
-
|
|
55
42
|
var text = content.split(/<strong>|<\/strong>/).filter(Boolean).join('');
|
|
56
43
|
return /*#__PURE__*/_react["default"].createElement(StyledH1, {
|
|
57
44
|
className: _.get(props, 'className', ''),
|
|
58
45
|
text: text
|
|
59
46
|
});
|
|
60
47
|
};
|
|
61
|
-
|
|
62
48
|
var H2 = function H2(props) {
|
|
63
49
|
var content = _.get(props, 'data.content.0', '');
|
|
64
|
-
|
|
65
50
|
var text = content.split(/<strong>|<\/strong>/).filter(Boolean).join('');
|
|
66
51
|
return /*#__PURE__*/_react["default"].createElement(StyledH2, {
|
|
67
52
|
className: _.get(props, 'className', ''),
|
|
68
53
|
text: text
|
|
69
54
|
});
|
|
70
55
|
};
|
|
71
|
-
|
|
72
|
-
var _default = {
|
|
56
|
+
var _default = exports["default"] = {
|
|
73
57
|
H1: H1,
|
|
74
58
|
H2: H2
|
|
75
|
-
};
|
|
76
|
-
exports["default"] = _default;
|
|
59
|
+
};
|