@financial-times/qanda-ui 0.0.1-beta.44 → 0.0.1-beta.46

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.
@@ -22,7 +22,6 @@ function ExpertDrawer() {
22
22
  o_comments_1.default.init();
23
23
  }
24
24
  catch (error) {
25
- reliability_1.qandaReliability.setArticleId(storyId);
26
25
  reliability_1.qandaReliability.failure('expert-load-coral-ui', error);
27
26
  }
28
27
  }
package/dist/cjs/index.js CHANGED
@@ -9,6 +9,7 @@ const preact_1 = require("preact");
9
9
  const Qanda_1 = __importDefault(require("./components/Qanda"));
10
10
  const QandaBlock_1 = __importDefault(require("./components/QandaBlock"));
11
11
  exports.QandaBlock = QandaBlock_1.default;
12
+ const reliability_1 = require("./services/reliability");
12
13
  class QandaUI {
13
14
  constructor(containerElement, options) {
14
15
  this.containerElement = containerElement;
@@ -35,6 +36,11 @@ class QandaUI {
35
36
  if (!storyId || !title || !commentsAPIHost || !commentsAPIVersion) {
36
37
  throw new Error('Required properties are missing');
37
38
  }
39
+ // Track the articleId in every metric for reliability
40
+ // Do this as soon as possible
41
+ // as we need to set it before the first event is sent
42
+ // qandaReliability is a singleton, so the id is stored for future usages from other modules
43
+ reliability_1.qandaReliability.setArticleId(storyId);
38
44
  //TODO: test this doesn't break all the other bits of js, needs to be throw because of typescript, can't just bail out normally
39
45
  this.storyId = storyId;
40
46
  this.useStaging = useStaging;
@@ -46,7 +52,31 @@ class QandaUI {
46
52
  init() {
47
53
  (0, preact_1.render)((0, jsx_runtime_1.jsx)(Qanda_1.default, { storyId: this.storyId, useStaging: this.useStaging, title: this.title, commentsAPIHost: this.commentsAPIHost, commentsAPIVersion: this.commentsAPIVersion, maxQuestionLength: this.maxQuestionLength, embedFormFieldContainer: this.embedFormFieldContainer, countdownTimerContainer: this.countdownTimerContainer }), this.containerElement);
48
54
  }
55
+ checkFooterVisibility(footerSelector) {
56
+ const footer = document.querySelector(footerSelector);
57
+ if (footer) {
58
+ this.footerObserver = new IntersectionObserver((entries) => {
59
+ const floatingActionBar = document.querySelector('.floating-action-bar__container');
60
+ if (floatingActionBar) {
61
+ entries.forEach((entry) => {
62
+ if (entry.isIntersecting &&
63
+ !floatingActionBar.classList.contains('o3-visually-hidden')) {
64
+ floatingActionBar.classList.add('o3-visually-hidden');
65
+ }
66
+ else {
67
+ floatingActionBar.classList.remove('o3-visually-hidden');
68
+ }
69
+ });
70
+ }
71
+ });
72
+ this.footerObserver.observe(footer);
73
+ }
74
+ }
49
75
  destroy() {
76
+ if (this.footerObserver) {
77
+ this.footerObserver.disconnect();
78
+ this.footerObserver = undefined;
79
+ }
50
80
  (0, preact_1.render)(null, this.containerElement);
51
81
  }
52
82
  }
@@ -66,7 +66,6 @@ exports.nextCommentsApi = (0, react_1.createApi)({
66
66
  }, { forceRefetch: true }));
67
67
  }
68
68
  catch (error) {
69
- reliability_1.qandaReliability.setArticleId(arg.storyId);
70
69
  reliability_1.qandaReliability.failure('qa-updates', error);
71
70
  }
72
71
  };
@@ -17,7 +17,6 @@ function ExpertDrawer() {
17
17
  OComments.init();
18
18
  }
19
19
  catch (error) {
20
- qandaReliability.setArticleId(storyId);
21
20
  qandaReliability.failure('expert-load-coral-ui', error);
22
21
  }
23
22
  }
package/dist/esm/index.js CHANGED
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "preact/jsx-runtime";
2
2
  import { render } from 'preact';
3
3
  import Qanda from './components/Qanda';
4
4
  import QandaBlock from './components/QandaBlock';
5
+ import { qandaReliability } from './services/reliability';
5
6
  class QandaUI {
6
7
  constructor(containerElement, options) {
7
8
  this.containerElement = containerElement;
@@ -28,6 +29,11 @@ class QandaUI {
28
29
  if (!storyId || !title || !commentsAPIHost || !commentsAPIVersion) {
29
30
  throw new Error('Required properties are missing');
30
31
  }
32
+ // Track the articleId in every metric for reliability
33
+ // Do this as soon as possible
34
+ // as we need to set it before the first event is sent
35
+ // qandaReliability is a singleton, so the id is stored for future usages from other modules
36
+ qandaReliability.setArticleId(storyId);
31
37
  //TODO: test this doesn't break all the other bits of js, needs to be throw because of typescript, can't just bail out normally
32
38
  this.storyId = storyId;
33
39
  this.useStaging = useStaging;
@@ -39,7 +45,31 @@ class QandaUI {
39
45
  init() {
40
46
  render(_jsx(Qanda, { storyId: this.storyId, useStaging: this.useStaging, title: this.title, commentsAPIHost: this.commentsAPIHost, commentsAPIVersion: this.commentsAPIVersion, maxQuestionLength: this.maxQuestionLength, embedFormFieldContainer: this.embedFormFieldContainer, countdownTimerContainer: this.countdownTimerContainer }), this.containerElement);
41
47
  }
48
+ checkFooterVisibility(footerSelector) {
49
+ const footer = document.querySelector(footerSelector);
50
+ if (footer) {
51
+ this.footerObserver = new IntersectionObserver((entries) => {
52
+ const floatingActionBar = document.querySelector('.floating-action-bar__container');
53
+ if (floatingActionBar) {
54
+ entries.forEach((entry) => {
55
+ if (entry.isIntersecting &&
56
+ !floatingActionBar.classList.contains('o3-visually-hidden')) {
57
+ floatingActionBar.classList.add('o3-visually-hidden');
58
+ }
59
+ else {
60
+ floatingActionBar.classList.remove('o3-visually-hidden');
61
+ }
62
+ });
63
+ }
64
+ });
65
+ this.footerObserver.observe(footer);
66
+ }
67
+ }
42
68
  destroy() {
69
+ if (this.footerObserver) {
70
+ this.footerObserver.disconnect();
71
+ this.footerObserver = undefined;
72
+ }
43
73
  render(null, this.containerElement);
44
74
  }
45
75
  }
@@ -63,7 +63,6 @@ export const nextCommentsApi = createApi({
63
63
  }, { forceRefetch: true }));
64
64
  }
65
65
  catch (error) {
66
- qandaReliability.setArticleId(arg.storyId);
67
66
  qandaReliability.failure('qa-updates', error);
68
67
  }
69
68
  };
package/dist/qanda.scss CHANGED
@@ -1,4 +1,4 @@
1
- $system-code: 'qanda';
1
+ $system-code: 'qanda' !default;
2
2
  $app-bg-color: #fff2e8;
3
3
  $app-text-color: #333;
4
4
  $app-header-color: #007acc;
@@ -10,8 +10,10 @@ declare class QandaUI {
10
10
  commentsAPIHost: string;
11
11
  commentsAPIVersion: string;
12
12
  maxQuestionLength: number;
13
+ footerObserver?: IntersectionObserver;
13
14
  constructor(containerElement: HTMLElement, options?: QandaProps);
14
15
  init(): void;
16
+ checkFooterVisibility(footerSelector: string): void;
15
17
  destroy(): void;
16
18
  }
17
19
  export { QandaUI, QandaBlock };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/qanda-ui",
3
- "version": "0.0.1-beta.44",
3
+ "version": "0.0.1-beta.46",
4
4
  "description": "Components for the Live Q&A (AKA Ask an Expert) UI",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",