@quintype/components 3.0.3-test-react18.1 → 3.0.3-url-decode.0

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.
Files changed (58) hide show
  1. package/dist/cjs/index.js +1047 -334
  2. package/dist/es/components/access-type.js +229 -51
  3. package/dist/es/components/adbutler-ad.js +14 -10
  4. package/dist/es/components/api-client.js +6 -4
  5. package/dist/es/components/breaking-news-item.js +3 -2
  6. package/dist/es/components/breaking-news.js +15 -1
  7. package/dist/es/components/client-side-only.js +26 -14
  8. package/dist/es/components/collection.js +5 -5
  9. package/dist/es/components/dfp-ad.js +30 -23
  10. package/dist/es/components/eager-load-images.js +9 -1
  11. package/dist/es/components/hamburger-button.js +5 -2
  12. package/dist/es/components/image-gallery.js +13 -10
  13. package/dist/es/components/impl/collection-impl.js +8 -2
  14. package/dist/es/components/impl/gumlet-image.js +15 -8
  15. package/dist/es/components/impl/image-utils.js +3 -3
  16. package/dist/es/components/impl/load-more-stories-manager.js +11 -0
  17. package/dist/es/components/impl/thumbor-image.js +15 -0
  18. package/dist/es/components/infinite-scroll.js +51 -3
  19. package/dist/es/components/infinite-story-base.js +16 -1
  20. package/dist/es/components/lazy-collection.js +8 -8
  21. package/dist/es/components/lazy-load-images.js +66 -36
  22. package/dist/es/components/link-base.js +19 -11
  23. package/dist/es/components/link.js +4 -1
  24. package/dist/es/components/load-more-collection-stories.js +10 -1
  25. package/dist/es/components/load-more-stories-base.js +12 -0
  26. package/dist/es/components/loading-indicator.js +5 -1
  27. package/dist/es/components/menu-item.js +10 -6
  28. package/dist/es/components/menu.js +9 -6
  29. package/dist/es/components/responsive-hero-image.js +3 -1
  30. package/dist/es/components/responsive-image.js +5 -0
  31. package/dist/es/components/responsive-source.js +1 -1
  32. package/dist/es/components/review-rating/review-rating.js +27 -21
  33. package/dist/es/components/review-rating/star-icon.js +5 -3
  34. package/dist/es/components/search-box.js +15 -1
  35. package/dist/es/components/search-page-base.js +10 -1
  36. package/dist/es/components/social-logins/with-facebook-login.js +20 -10
  37. package/dist/es/components/social-logins/with-google-login.js +18 -8
  38. package/dist/es/components/social-logins/with-linkedin-login.js +12 -7
  39. package/dist/es/components/social-logins/with-social-login.js +13 -1
  40. package/dist/es/components/social-logins/with-twitter-login.js +7 -7
  41. package/dist/es/components/social-share.js +15 -1
  42. package/dist/es/components/story-element.js +66 -27
  43. package/dist/es/components/story-elements/dailymotion.js +30 -2
  44. package/dist/es/components/story-elements/jsembed.js +19 -2
  45. package/dist/es/components/story-elements/polltype.js +12 -0
  46. package/dist/es/components/story-elements/table.js +20 -4
  47. package/dist/es/components/story-elements/youtube.js +45 -9
  48. package/dist/es/components/update-on-interval.js +18 -1
  49. package/dist/es/components/with-client-side-only.js +4 -3
  50. package/dist/es/components/with-error.js +12 -1
  51. package/dist/es/components/with-host-url.js +9 -4
  52. package/dist/es/components/with-lazy.js +13 -1
  53. package/dist/es/components/with-member.js +23 -7
  54. package/dist/es/components/with-preview.js +12 -1
  55. package/dist/es/components/wrap-collection-layout.js +16 -4
  56. package/dist/es/store/reducers.js +45 -1
  57. package/dist/es/utils.js +12 -7
  58. package/package.json +6 -9
@@ -1,19 +1,19 @@
1
1
  import React from 'react';
2
2
  import { WithSocialLogin } from './with-social-login';
3
-
4
3
  /**
5
4
  * @see {@link WithSocialLogin}
6
5
  * @component
7
6
  * @category Login
8
7
  */
8
+
9
9
  export function WithFacebookLogin(_ref) {
10
10
  var appId = _ref.appId,
11
- children = _ref.children,
12
- scope = _ref.scope,
13
- emailMandatory = _ref.emailMandatory,
14
- redirectUrl = _ref.redirectUrl,
15
- sso = _ref.sso,
16
- isBridgekeeperLogin = _ref.isBridgekeeperLogin;
11
+ children = _ref.children,
12
+ scope = _ref.scope,
13
+ emailMandatory = _ref.emailMandatory,
14
+ redirectUrl = _ref.redirectUrl,
15
+ sso = _ref.sso,
16
+ isBridgekeeperLogin = _ref.isBridgekeeperLogin;
17
17
  return /*#__PURE__*/React.createElement(WithSocialLogin, {
18
18
  provider: 'facebook',
19
19
  initialize: function initialize() {
@@ -31,10 +31,12 @@ export function WithFacebookLogin(_ref) {
31
31
  isBridgekeeperLogin: isBridgekeeperLogin
32
32
  });
33
33
  }
34
+
34
35
  function loadFacebookSDK(appId) {
35
36
  if (global.FB) {
36
37
  return;
37
38
  }
39
+
38
40
  global.fbAsyncInit = global.fbAsyncInit || function () {
39
41
  global.FB.init({
40
42
  appId: appId,
@@ -42,18 +44,22 @@ function loadFacebookSDK(appId) {
42
44
  version: 'v3.1'
43
45
  });
44
46
  };
47
+
45
48
  (function (d, s, id) {
46
49
  var js,
47
- fjs = d.getElementsByTagName(s)[0];
50
+ fjs = d.getElementsByTagName(s)[0];
51
+
48
52
  if (d.getElementById(id)) {
49
53
  return;
50
54
  }
55
+
51
56
  js = d.createElement(s);
52
57
  js.id = id;
53
58
  js.src = "https://connect.facebook.net/en_US/sdk.js";
54
59
  fjs.parentNode.insertBefore(js, fjs);
55
60
  })(document, 'script', 'facebook-jssdk');
56
61
  }
62
+
57
63
  function fbLogin(params) {
58
64
  return new Promise(function (resolve, reject) {
59
65
  return global.FB.login(function (response) {
@@ -63,6 +69,7 @@ function fbLogin(params) {
63
69
  }, params);
64
70
  });
65
71
  }
72
+
66
73
  function fbVerifyEmailExists(token) {
67
74
  return new Promise(function (resolve, reject) {
68
75
  return global.FB.api('/me', {
@@ -72,13 +79,16 @@ function fbVerifyEmailExists(token) {
72
79
  });
73
80
  });
74
81
  }
82
+
75
83
  function loginWithFacebook() {
76
84
  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
77
- scope = _ref2.scope,
78
- emailMandatory = _ref2.emailMandatory;
85
+ scope = _ref2.scope,
86
+ emailMandatory = _ref2.emailMandatory;
87
+
79
88
  if (!global.FB) {
80
89
  return Promise.reject('NOT_LOADED');
81
90
  }
91
+
82
92
  return fbLogin({
83
93
  scope: scope
84
94
  }).then(function (token) {
@@ -1,19 +1,19 @@
1
1
  import React from 'react';
2
2
  import { WithSocialLogin } from './with-social-login';
3
-
4
3
  /**
5
4
  * @see {@link WithSocialLogin}
6
5
  * @component
7
6
  * @category Login
8
7
  */
8
+
9
9
  export function WithGoogleLogin(_ref) {
10
10
  var clientId = _ref.clientId,
11
- children = _ref.children,
12
- scope = _ref.scope,
13
- emailMandatory = _ref.emailMandatory,
14
- redirectUrl = _ref.redirectUrl,
15
- sso = _ref.sso,
16
- isBridgekeeperLogin = _ref.isBridgekeeperLogin;
11
+ children = _ref.children,
12
+ scope = _ref.scope,
13
+ emailMandatory = _ref.emailMandatory,
14
+ redirectUrl = _ref.redirectUrl,
15
+ sso = _ref.sso,
16
+ isBridgekeeperLogin = _ref.isBridgekeeperLogin;
17
17
  return /*#__PURE__*/React.createElement(WithSocialLogin, {
18
18
  provider: 'google',
19
19
  initialize: function initialize() {
@@ -30,6 +30,7 @@ export function WithGoogleLogin(_ref) {
30
30
  isBridgekeeperLogin: isBridgekeeperLogin
31
31
  });
32
32
  }
33
+
33
34
  var onScriptLoaded = function onScriptLoaded(clientId, scope) {
34
35
  global.gapi.load('client:auth2', function () {
35
36
  return global.gapi.client.init({
@@ -38,16 +39,21 @@ var onScriptLoaded = function onScriptLoaded(clientId, scope) {
38
39
  });
39
40
  });
40
41
  };
42
+
41
43
  var loginWithGoogle = function loginWithGoogle() {
42
44
  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
43
- emailMandatory = _ref2.emailMandatory;
45
+ emailMandatory = _ref2.emailMandatory;
46
+
44
47
  if (!global.gapi || !global.gapi.client) {
45
48
  return Promise.reject("NOT_LOADED");
46
49
  }
50
+
47
51
  var GoogleAuth = global.gapi.auth2.getAuthInstance();
52
+
48
53
  if (!GoogleAuth) {
49
54
  return Promise.reject("NOT_LOADED");
50
55
  }
56
+
51
57
  return GoogleAuth.signIn().then(function (response) {
52
58
  return emailMandatory && !response.getBasicProfile().getEmail() ? Promise.reject('NO_EMAIL') : {
53
59
  'access-token': response.getAuthResponse().access_token
@@ -56,16 +62,20 @@ var loginWithGoogle = function loginWithGoogle() {
56
62
  return Promise.reject('NOT_GRANTED');
57
63
  });
58
64
  };
65
+
59
66
  var loadGoogleSDK = function loadGoogleSDK(clientId, scope) {
60
67
  if (global.gapi) {
61
68
  return;
62
69
  }
70
+
63
71
  var script = document.createElement('script');
64
72
  script.src = 'https://apis.google.com/js/api.js';
65
73
  script.async = true;
66
74
  script.defer = true;
75
+
67
76
  script.onload = function () {
68
77
  return onScriptLoaded(clientId, scope);
69
78
  };
79
+
70
80
  document.getElementsByTagName('body')[0].appendChild(script);
71
81
  };
@@ -1,19 +1,19 @@
1
1
  import React from 'react';
2
2
  import { WithSocialLogin } from './with-social-login';
3
-
4
3
  /**
5
4
  * @see {@link WithSocialLogin}
6
5
  * @component
7
6
  * @category Login
8
7
  */
8
+
9
9
  export function WithLinkedInLogin(_ref) {
10
10
  var clientKey = _ref.clientKey,
11
- children = _ref.children,
12
- scope = _ref.scope,
13
- emailMandatory = _ref.emailMandatory,
14
- redirectUrl = _ref.redirectUrl,
15
- sso = _ref.sso,
16
- isBridgekeeperLogin = _ref.isBridgekeeperLogin;
11
+ children = _ref.children,
12
+ scope = _ref.scope,
13
+ emailMandatory = _ref.emailMandatory,
14
+ redirectUrl = _ref.redirectUrl,
15
+ sso = _ref.sso,
16
+ isBridgekeeperLogin = _ref.isBridgekeeperLogin;
17
17
  return /*#__PURE__*/React.createElement(WithSocialLogin, {
18
18
  provider: 'linkedin',
19
19
  initialize: function initialize() {
@@ -30,10 +30,12 @@ export function WithLinkedInLogin(_ref) {
30
30
  isBridgekeeperLogin: isBridgekeeperLogin
31
31
  });
32
32
  }
33
+
33
34
  var loadLinkedInSdk = function loadLinkedInSdk(clientKey, scope) {
34
35
  if (global.IN) {
35
36
  return;
36
37
  }
38
+
37
39
  var script = document.createElement('script');
38
40
  script.src = '//platform.linkedin.com/in.js';
39
41
  script.type = 'text/javascript';
@@ -42,11 +44,14 @@ var loadLinkedInSdk = function loadLinkedInSdk(clientKey, scope) {
42
44
  script.innerHTML = "\n api_key: ".concat(clientKey, "\n");
43
45
  document.getElementsByTagName('body')[0].appendChild(script);
44
46
  };
47
+
45
48
  var loginWithLinkedIn = function loginWithLinkedIn(_ref2) {
46
49
  var emailMandatory = _ref2.emailMandatory;
50
+
47
51
  if (!global.IN || !global.IN.User) {
48
52
  return Promise.reject("NOT_LOADED");
49
53
  }
54
+
50
55
  return new Promise(function (resolve, reject) {
51
56
  global.IN.User.authorize(function (e) {
52
57
  if (global.IN.User.isAuthorized()) {
@@ -3,12 +3,14 @@ import _createClass from "@babel/runtime/helpers/createClass";
3
3
  import _inherits from "@babel/runtime/helpers/inherits";
4
4
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
5
5
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
6
+
6
7
  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); }; }
8
+
7
9
  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; } }
10
+
8
11
  import { bool, func, string } from 'prop-types';
9
12
  import React from 'react';
10
13
  import { postRequest } from '../api-client';
11
-
12
14
  /**
13
15
  * This is an abstract render props component for logging in with social accounts. The component adds two items to scope: `serverSideLoginPath` for redirecting to server side, and `login` for doing a client side login. Calling `login()` returns a promise which can be used to handle success and failure cases.
14
16
  *
@@ -56,12 +58,17 @@ import { postRequest } from '../api-client';
56
58
  * @hideconstructor
57
59
  * @category Login
58
60
  */
61
+
59
62
  export var WithSocialLogin = /*#__PURE__*/function (_React$Component) {
60
63
  _inherits(WithSocialLogin, _React$Component);
64
+
61
65
  var _super = /*#__PURE__*/_createSuper(WithSocialLogin);
66
+
62
67
  function WithSocialLogin(props) {
63
68
  var _this;
69
+
64
70
  _classCallCheck(this, WithSocialLogin);
71
+
65
72
  _this = _super.call(this, props);
66
73
  _this.bridgekeeperServerLoginPath = "/api/auth/v1/login?auth-provider=".concat(_this.props.provider, "&redirect-url=").concat(_this.props.redirectUrl ? _this.props.redirectUrl : global.location && global.location.origin);
67
74
  _this.defaultServerLoginPath = "/login?auth-provider=".concat(_this.props.provider, "&remote-host=").concat(global.location && global.location.origin);
@@ -69,6 +76,7 @@ export var WithSocialLogin = /*#__PURE__*/function (_React$Component) {
69
76
  _this.serverSideSSOLoginPath = "/login?auth-provider=".concat(_this.props.provider, "&redirect-url=").concat(_this.props.sso && _this.props.redirectUrl ? _this.props.redirectUrl : global.location && global.location.origin);
70
77
  return _this;
71
78
  }
79
+
72
80
  _createClass(WithSocialLogin, [{
73
81
  key: "componentDidMount",
74
82
  value: function componentDidMount() {
@@ -78,6 +86,7 @@ export var WithSocialLogin = /*#__PURE__*/function (_React$Component) {
78
86
  key: "render",
79
87
  value: function render() {
80
88
  var _this2 = this;
89
+
81
90
  return this.props.children({
82
91
  login: function login(props) {
83
92
  return _this2.props.socialLogin.call(_this2, props).then(function (token) {
@@ -88,8 +97,10 @@ export var WithSocialLogin = /*#__PURE__*/function (_React$Component) {
88
97
  });
89
98
  }
90
99
  }]);
100
+
91
101
  return WithSocialLogin;
92
102
  }(React.Component);
103
+
93
104
  function createSession(provider, token) {
94
105
  return postRequest("/api/login/".concat(provider), {
95
106
  token: token,
@@ -98,6 +109,7 @@ function createSession(provider, token) {
98
109
  return r;
99
110
  });
100
111
  }
112
+
101
113
  WithSocialLogin.defaultProps = {
102
114
  initialize: function initialize() {},
103
115
  // function is rebound in WithSocialLogin
@@ -1,19 +1,19 @@
1
1
  import React from 'react';
2
2
  import { WithSocialLogin } from './with-social-login';
3
-
4
3
  /**
5
4
  * @see {@link WithSocialLogin}
6
5
  * @component
7
6
  * @category Login
8
7
  */
8
+
9
9
  export function WithTwitterLogin(_ref) {
10
10
  var clientId = _ref.clientId,
11
- children = _ref.children,
12
- scope = _ref.scope,
13
- emailMandatory = _ref.emailMandatory,
14
- redirectUrl = _ref.redirectUrl,
15
- sso = _ref.sso,
16
- isBridgekeeperLogin = _ref.isBridgekeeperLogin;
11
+ children = _ref.children,
12
+ scope = _ref.scope,
13
+ emailMandatory = _ref.emailMandatory,
14
+ redirectUrl = _ref.redirectUrl,
15
+ sso = _ref.sso,
16
+ isBridgekeeperLogin = _ref.isBridgekeeperLogin;
17
17
  return /*#__PURE__*/React.createElement(WithSocialLogin, {
18
18
  provider: 'twitter',
19
19
  children: children,
@@ -3,15 +3,20 @@ import _createClass from "@babel/runtime/helpers/createClass";
3
3
  import _inherits from "@babel/runtime/helpers/inherits";
4
4
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
5
5
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
6
+
6
7
  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); }; }
8
+
7
9
  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; } }
10
+
8
11
  import React from "react";
9
12
  import { connect } from "react-redux";
10
13
  import { withError } from './with-error';
14
+
11
15
  function getNativeShareHandler(canNativeShare, title, fullUrl) {
12
16
  if (!canNativeShare) {
13
17
  return null;
14
18
  }
19
+
15
20
  return function handleShare() {
16
21
  window.navigator.share({
17
22
  title: title,
@@ -19,18 +24,24 @@ function getNativeShareHandler(canNativeShare, title, fullUrl) {
19
24
  })["catch"](console.error);
20
25
  };
21
26
  }
27
+
22
28
  var SocialShareBase = /*#__PURE__*/function (_React$Component) {
23
29
  _inherits(SocialShareBase, _React$Component);
30
+
24
31
  var _super = /*#__PURE__*/_createSuper(SocialShareBase);
32
+
25
33
  function SocialShareBase(props) {
26
34
  var _this;
35
+
27
36
  _classCallCheck(this, SocialShareBase);
37
+
28
38
  _this = _super.call(this, props);
29
39
  _this.state = {
30
40
  canNativeShare: false
31
41
  };
32
42
  return _this;
33
43
  }
44
+
34
45
  _createClass(SocialShareBase, [{
35
46
  key: "componentDidMount",
36
47
  value: function componentDidMount() {
@@ -54,14 +65,15 @@ var SocialShareBase = /*#__PURE__*/function (_React$Component) {
54
65
  }, this.props));
55
66
  }
56
67
  }]);
68
+
57
69
  return SocialShareBase;
58
70
  }(React.Component);
71
+
59
72
  function mapStateToProps(state) {
60
73
  return {
61
74
  publisherUrl: state.qt.config["sketches-host"]
62
75
  };
63
76
  }
64
-
65
77
  /**
66
78
  * This component renders social share component to front end app.
67
79
  *
@@ -99,4 +111,6 @@ function mapStateToProps(state) {
99
111
  * @component
100
112
  * @category Story Page
101
113
  */
114
+
115
+
102
116
  export var SocialShare = /*#__PURE__*/connect(mapStateToProps, {})( /*#__PURE__*/withError(SocialShareBase));
@@ -7,10 +7,15 @@ import _inherits from "@babel/runtime/helpers/inherits";
7
7
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
8
8
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
9
9
  var _excluded = ["renderTemplates"];
10
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
11
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
10
+
11
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
12
+
13
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
14
+
12
15
  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); }; }
16
+
13
17
  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; } }
18
+
14
19
  import classNames from "classnames";
15
20
  import get from "lodash/get";
16
21
  import React from "react";
@@ -22,7 +27,6 @@ import JSEmbed from "./story-elements/jsembed";
22
27
  import Polltype from "./story-elements/polltype";
23
28
  import { Table } from "./story-elements/table";
24
29
  import StoryElementYoutube from "./story-elements/youtube";
25
-
26
30
  /**
27
31
  * This component renders different types of [story elements](https://developers.quintype.com/malibu/terminology#story-elements)
28
32
 
@@ -48,18 +52,24 @@ import StoryElementYoutube from "./story-elements/youtube";
48
52
  * @hideconstructor
49
53
  * @category Story Page
50
54
  */
55
+
51
56
  export var StoryElement = /*#__PURE__*/function (_React$Component) {
52
57
  _inherits(StoryElement, _React$Component);
58
+
53
59
  var _super = /*#__PURE__*/_createSuper(StoryElement);
60
+
54
61
  function StoryElement(props) {
55
62
  var _this;
63
+
56
64
  _classCallCheck(this, StoryElement);
65
+
57
66
  _this = _super.call(this, props);
58
67
  _this.state = {
59
68
  crashed: false
60
69
  };
61
70
  return _this;
62
71
  }
72
+
63
73
  _createClass(StoryElement, [{
64
74
  key: "componentDidCatch",
65
75
  value: function componentDidCatch(error, stack) {
@@ -81,27 +91,32 @@ export var StoryElement = /*#__PURE__*/function (_React$Component) {
81
91
  }
82
92
  }
83
93
  }]);
94
+
84
95
  return StoryElement;
85
96
  }(React.Component);
97
+
86
98
  function StoryElementText(_ref) {
87
99
  var _ref$element = _ref.element,
88
- element = _ref$element === void 0 ? {} : _ref$element,
89
- externalLink = _ref.externalLink;
100
+ element = _ref$element === void 0 ? {} : _ref$element,
101
+ externalLink = _ref.externalLink;
90
102
  var text = element.text || "";
103
+
91
104
  if (externalLink) {
92
105
  text = element.text.replace(/<a/g, '<a target="_blank"');
93
106
  }
107
+
94
108
  return /*#__PURE__*/React.createElement("div", {
95
109
  dangerouslySetInnerHTML: {
96
110
  __html: text
97
111
  }
98
112
  });
99
113
  }
114
+
100
115
  function StoryElementAlsoRead(_ref2) {
101
116
  var element = _ref2.element,
102
- story = _ref2.story,
103
- _ref2$alsoreadText = _ref2.alsoreadText,
104
- alsoreadText = _ref2$alsoreadText === void 0 ? "Also Read: " : _ref2$alsoreadText;
117
+ story = _ref2.story,
118
+ _ref2$alsoreadText = _ref2.alsoreadText,
119
+ alsoreadText = _ref2$alsoreadText === void 0 ? "Also Read: " : _ref2$alsoreadText;
105
120
  var linkedStories = get(story, ["linked-stories"]);
106
121
  var linkedStoryId = get(element, ["metadata", "linked-story-id"]);
107
122
  var linkedStorySlug = get(linkedStories, [linkedStoryId, "slug"]);
@@ -114,14 +129,15 @@ function StoryElementAlsoRead(_ref2) {
114
129
  className: "story-element-text-also-read__label"
115
130
  }, alsoreadText), /*#__PURE__*/React.createElement(Link, linkProps, element.text));
116
131
  }
132
+
117
133
  function StoryElementImage(_ref3) {
118
134
  var element = _ref3.element,
119
- _ref3$story = _ref3.story,
120
- story = _ref3$story === void 0 ? {} : _ref3$story,
121
- imageWidths = _ref3.imageWidths,
122
- imageDefaultWidth = _ref3.imageDefaultWidth,
123
- _ref3$onClick = _ref3.onClick,
124
- onClick = _ref3$onClick === void 0 ? function () {} : _ref3$onClick;
135
+ _ref3$story = _ref3.story,
136
+ story = _ref3$story === void 0 ? {} : _ref3$story,
137
+ imageWidths = _ref3.imageWidths,
138
+ imageDefaultWidth = _ref3.imageDefaultWidth,
139
+ _ref3$onClick = _ref3.onClick,
140
+ onClick = _ref3$onClick === void 0 ? function () {} : _ref3$onClick;
125
141
  return /*#__PURE__*/React.createElement("figure", {}, /*#__PURE__*/React.createElement(ResponsiveImage, {
126
142
  slug: element["image-s3-key"],
127
143
  metadata: element["metadata"],
@@ -147,10 +163,12 @@ function StoryElementImage(_ref3) {
147
163
  className: "story-element-image-attribution"
148
164
  }) : undefined));
149
165
  }
166
+
150
167
  function StoryElementTitle(_ref4) {
151
168
  var element = _ref4.element;
152
169
  return /*#__PURE__*/React.createElement("h2", {}, element.text);
153
170
  }
171
+
154
172
  function StoryElementSoundCloud(_ref5) {
155
173
  var element = _ref5.element;
156
174
  return /*#__PURE__*/React.createElement("iframe", {
@@ -158,6 +176,7 @@ function StoryElementSoundCloud(_ref5) {
158
176
  width: "100%"
159
177
  });
160
178
  }
179
+
161
180
  function StoryElementJsembed(_ref6) {
162
181
  var element = _ref6.element;
163
182
  return /*#__PURE__*/React.createElement(JSEmbed, {
@@ -165,12 +184,14 @@ function StoryElementJsembed(_ref6) {
165
184
  id: element["id"]
166
185
  });
167
186
  }
187
+
168
188
  function StoryElementPolltype(_ref7) {
169
189
  var element = _ref7.element;
170
190
  return /*#__PURE__*/React.createElement(Polltype, {
171
191
  id: element["polltype-id"]
172
192
  });
173
193
  }
194
+
174
195
  function StoryElementTable(_ref8) {
175
196
  var element = _ref8.element;
176
197
  return /*#__PURE__*/React.createElement(Table, {
@@ -179,6 +200,7 @@ function StoryElementTable(_ref8) {
179
200
  hasHeader: element.metadata["has-header"]
180
201
  });
181
202
  }
203
+
182
204
  function StoryElementFile(_ref9) {
183
205
  var element = _ref9.element;
184
206
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -188,11 +210,10 @@ function StoryElementFile(_ref9) {
188
210
  href: element.url,
189
211
  download: true
190
212
  }, "download"));
191
- }
192
-
193
- // FIXME MISSING: composite
213
+ } // FIXME MISSING: composite
194
214
  // TODO: Can also support various subtypes (though not needed potentially)
195
215
 
216
+
196
217
  var DEFAULT_TEMPLATES = {
197
218
  text: StoryElementText,
198
219
  image: StoryElementImage,
@@ -206,13 +227,19 @@ var DEFAULT_TEMPLATES = {
206
227
  "also-read": StoryElementAlsoRead,
207
228
  file: StoryElementFile
208
229
  };
230
+
209
231
  var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
210
232
  _inherits(StoryElementBase, _React$Component2);
233
+
211
234
  var _super2 = /*#__PURE__*/_createSuper(StoryElementBase);
235
+
212
236
  function StoryElementBase(props) {
213
237
  var _this2;
238
+
214
239
  _classCallCheck(this, StoryElementBase);
240
+
215
241
  _this2 = _super2.call(this, props);
242
+
216
243
  _defineProperty(_assertThisInitialized(_this2), "initiateObserver", function () {
217
244
  if (_this2.props.disableAnalytics === true) return false;
218
245
  var options = {
@@ -221,11 +248,14 @@ var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
221
248
  threshold: 1.0
222
249
  };
223
250
  _this2.observer = new IntersectionObserver(_this2.observerCallback, options);
251
+
224
252
  _this2.observer.observe(_this2.storyElementRef);
225
253
  });
254
+
226
255
  _defineProperty(_assertThisInitialized(_this2), "destroyObserver", function () {
227
256
  _this2.observer && _this2.observer.disconnect();
228
257
  });
258
+
229
259
  _defineProperty(_assertThisInitialized(_this2), "observerCallback", function (entries) {
230
260
  entries.forEach(function (entry) {
231
261
  if (entry.isIntersecting) {
@@ -233,10 +263,12 @@ var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
233
263
  }
234
264
  });
235
265
  });
266
+
236
267
  _this2.observer = null;
237
268
  _this2.storyElementRef = null;
238
269
  return _this2;
239
270
  }
271
+
240
272
  _createClass(StoryElementBase, [{
241
273
  key: "componentDidMount",
242
274
  value: function componentDidMount() {
@@ -258,18 +290,20 @@ var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
258
290
  key: "emitElementQlitics",
259
291
  value: function emitElementQlitics() {
260
292
  var _this$props = this.props,
261
- _this$props$story = _this$props.story,
262
- story = _this$props$story === void 0 ? {} : _this$props$story,
263
- _this$props$card = _this$props.card,
264
- card = _this$props$card === void 0 ? {} : _this$props$card,
265
- _this$props$element = _this$props.element,
266
- element = _this$props$element === void 0 ? {} : _this$props$element;
293
+ _this$props$story = _this$props.story,
294
+ story = _this$props$story === void 0 ? {} : _this$props$story,
295
+ _this$props$card = _this$props.card,
296
+ card = _this$props$card === void 0 ? {} : _this$props$card,
297
+ _this$props$element = _this$props.element,
298
+ element = _this$props$element === void 0 ? {} : _this$props$element;
299
+
267
300
  if (global.qlitics) {
268
301
  global.qlitics("track", "story-element-view", getQliticsSchema(story, card, element));
269
302
  } else {
270
303
  global.qlitics = global.qlitics || function () {
271
304
  (qlitics.q = qlitics.q || []).push(arguments);
272
305
  };
306
+
273
307
  global.qlitics("track", "story-element-view", getQliticsSchema(story, card, element));
274
308
  }
275
309
  }
@@ -282,15 +316,18 @@ var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
282
316
  key: "render",
283
317
  value: function render() {
284
318
  var _classNames,
285
- _this3 = this;
319
+ _this3 = this;
320
+
286
321
  var storyElement = this.props.element;
287
322
  var typeClassName = "story-element-".concat(storyElement.type);
288
323
  var subtypeClassName = "story-element-".concat(storyElement.type, "-").concat(storyElement.subtype);
289
324
  var storyElementTemplate = this.template();
325
+
290
326
  var _this$props2 = this.props,
291
- _this$props2$renderTe = _this$props2.renderTemplates,
292
- renderTemplates = _this$props2$renderTe === void 0 ? {} : _this$props2$renderTe,
293
- elementProps = _objectWithoutProperties(_this$props2, _excluded);
327
+ _this$props2$renderTe = _this$props2.renderTemplates,
328
+ renderTemplates = _this$props2$renderTe === void 0 ? {} : _this$props2$renderTe,
329
+ elementProps = _objectWithoutProperties(_this$props2, _excluded);
330
+
294
331
  var renderTemplate = renderTemplates[storyElement.subtype] || renderTemplates[storyElement.type];
295
332
  return /*#__PURE__*/React.createElement("div", {
296
333
  className: classNames((_classNames = {
@@ -302,6 +339,8 @@ var StoryElementBase = /*#__PURE__*/function (_React$Component2) {
302
339
  }, renderTemplate ? /*#__PURE__*/React.createElement(renderTemplate, _objectSpread({}, elementProps), /*#__PURE__*/React.createElement(storyElementTemplate, Object.assign({}, elementProps))) : /*#__PURE__*/React.createElement(storyElementTemplate, Object.assign({}, elementProps)));
303
340
  }
304
341
  }]);
342
+
305
343
  return StoryElementBase;
306
344
  }(React.Component);
345
+
307
346
  export var STORY_ELEMENT_TEMPLATES = DEFAULT_TEMPLATES;