@fluid-topics/ft-reader-topic-content 1.3.52 → 1.3.53

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 (5) hide show
  1. package/build/ft-reader-topic-content.d.ts +3 -0
  2. package/build/ft-reader-topic-content.js +35 -14
  3. package/build/ft-reader-topic-content.light.js +24 -24
  4. package/build/ft-reader-topic-content.min.js +30 -30
  5. package/package.json +8 -8
package/build/ft-reader-topic-content.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare class FtReaderTopicContent extends FtReaderTopicComponent impleme
12
12
  private translationSourceLanguage?;
13
13
  private translationLoading?;
14
14
  private translationError?;
15
+ linkPreviewDialogId?: string;
15
16
  scrollTarget?: FtReaderScrollTarget;
16
17
  content?: string;
17
18
  error?: Error;
@@ -19,6 +20,7 @@ export declare class FtReaderTopicContent extends FtReaderTopicComponent impleme
19
20
  contentPreprocessor: (content: string) => Promise<string> | string;
20
21
  onContentAvailable: (container: HTMLElement, shadowRoot: ShadowRoot) => void;
21
22
  topicContainer?: HTMLElement;
23
+ crossMapLinks?: HTMLLinkElement[];
22
24
  protected render(): import("lit-html").TemplateResult<1>;
23
25
  protected update(props: PropertyValues): void;
24
26
  private updateContent;
@@ -30,4 +32,5 @@ export declare class FtReaderTopicContent extends FtReaderTopicComponent impleme
30
32
  renderTopicContent(): import("lit-html").TemplateResult<1>;
31
33
  private is404Error;
32
34
  private getTopicLanguage;
35
+ private handleLinkPreviews;
33
36
  }
package/build/ft-reader-topic-content.js CHANGED
@@ -9,13 +9,13 @@ import { styles } from "./ft-reader-topic-content.styles";
9
9
  import { FtReaderTopicComponent } from "@fluid-topics/ft-reader-topic-context/build/registration";
10
10
  import { unsafeHTML } from "lit/directives/unsafe-html.js";
11
11
  import { highlightHtml, highlightHtmlStyles, redux, waitFor } from "@fluid-topics/ft-wc-utils";
12
- import { property, query, state } from "lit/decorators.js";
12
+ import { property, query, queryAll, state } from "lit/decorators.js";
13
13
  import "@fluid-topics/ft-icon";
14
14
  import { context } from "./i18n/TopicContentMessages";
15
15
  class FtReaderTopicContent extends FtReaderTopicComponent {
16
16
  constructor() {
17
17
  super(...arguments);
18
- this.contentPreprocessor = content => content;
18
+ this.contentPreprocessor = (content) => content;
19
19
  this.onContentAvailable = () => null;
20
20
  }
21
21
  render() {
@@ -36,7 +36,7 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
36
36
  }
37
37
  update(props) {
38
38
  super.update(props);
39
- if (["map", "tocNode", "translationDestinationLanguage", "translationProfileId"].some(p => props.has(p))) {
39
+ if (["map", "tocNode", "translationDestinationLanguage", "translationProfileId"].some((p) => props.has(p))) {
40
40
  this.updateContent();
41
41
  }
42
42
  }
@@ -45,7 +45,7 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
45
45
  this.error = undefined;
46
46
  this.content = undefined;
47
47
  if (this.map && this.tocNode) {
48
- (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.fetchTopicContent(this.tocNode).then(content => this.contentPreprocessor(content || "<div class=\"empty-topic\"></div>")).then(content => this.content = content).catch(e => this.error = e);
48
+ (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.fetchTopicContent(this.tocNode).then((content) => this.contentPreprocessor(content || "<div class=\"empty-topic\"></div>")).then((content) => this.content = content).catch((e) => this.error = e);
49
49
  }
50
50
  }
51
51
  contentAvailableCallback(props) {
@@ -59,12 +59,17 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
59
59
  (_f = this.stateManager) === null || _f === void 0 ? void 0 : _f.scrollDone();
60
60
  }
61
61
  if ((props.has("searchInDocumentQuery") || props.has("content")) && this.content) {
62
- waitFor(() => this.topicContainer).then(topicContainer => {
62
+ waitFor(() => this.topicContainer).then((topicContainer) => {
63
63
  highlightHtml(topicContainer, this.searchInDocumentQuery, { attributes: { part: "kwicmatch" } });
64
64
  });
65
65
  }
66
+ if ((props.has("linkPreviewDialogId") || props.has("content")) && this.content) {
67
+ waitFor(() => this.topicContainer).then(() => {
68
+ this.handleLinkPreviews();
69
+ });
70
+ }
66
71
  if (props.has("content") && this.content) {
67
- waitFor(() => this.topicContainer).then(topicContainer => {
72
+ waitFor(() => this.topicContainer).then((topicContainer) => {
68
73
  this.moveSvgInShadowRoot();
69
74
  this.processExpandingBlocks();
70
75
  this.processOpenApiSelect();
@@ -76,14 +81,14 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
76
81
  }
77
82
  }
78
83
  processExpandingBlocks() {
79
- for (let link of this.shadowRoot.querySelectorAll(".ft-expanding-block-link")) {
84
+ for (const link of this.shadowRoot.querySelectorAll(".ft-expanding-block-link")) {
80
85
  link.onclick = (e) => {
81
86
  var _a, _b, _c, _d;
82
87
  e.stopPropagation();
83
88
  e.preventDefault();
84
89
  if (link.classList.contains("ft-expanding-exclusive")
85
90
  && !link.classList.contains("ft-expanding-block-expanded")) {
86
- for (let block of Array.from((_b = (_a = this.topicContainer) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ft-expanding-block-expanded")) !== null && _b !== void 0 ? _b : [])) {
91
+ for (const block of Array.from((_b = (_a = this.topicContainer) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ft-expanding-block-expanded")) !== null && _b !== void 0 ? _b : [])) {
87
92
  block.classList.remove("ft-expanding-block-expanded");
88
93
  }
89
94
  }
@@ -94,19 +99,19 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
94
99
  }
95
100
  }
96
101
  processOpenApiSelect() {
97
- for (let select of this.shadowRoot.querySelectorAll(".ft-openapi-select")) {
102
+ for (const select of this.shadowRoot.querySelectorAll(".ft-openapi-select")) {
98
103
  select.onchange = (event) => {
99
104
  var _a, _b, _c;
100
105
  const select = event.target;
101
106
  const selectContainer = (_a = select === null || select === void 0 ? void 0 : select.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
102
- const targetElement = selectContainer === null || selectContainer === void 0 ? void 0 : selectContainer.querySelector('.select-example[content-type="' + select.value + '"]');
103
- (_c = (_b = targetElement === null || targetElement === void 0 ? void 0 : targetElement.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector(':scope > .selected-example')) === null || _c === void 0 ? void 0 : _c.classList.toggle('selected-example');
104
- targetElement === null || targetElement === void 0 ? void 0 : targetElement.classList.toggle('selected-example');
107
+ const targetElement = selectContainer === null || selectContainer === void 0 ? void 0 : selectContainer.querySelector(".select-example[content-type=\"" + select.value + "\"]");
108
+ (_c = (_b = targetElement === null || targetElement === void 0 ? void 0 : targetElement.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector(":scope > .selected-example")) === null || _c === void 0 ? void 0 : _c.classList.toggle("selected-example");
109
+ targetElement === null || targetElement === void 0 ? void 0 : targetElement.classList.toggle("selected-example");
105
110
  };
106
111
  }
107
112
  }
108
113
  moveSvgInShadowRoot() {
109
- this.shadowRoot.querySelectorAll(".ft-svg-container").forEach(svgContainer => {
114
+ this.shadowRoot.querySelectorAll(".ft-svg-container").forEach((svgContainer) => {
110
115
  if (!svgContainer.shadowRoot) {
111
116
  const innerHTML = svgContainer.innerHTML;
112
117
  svgContainer.innerHTML = "";
@@ -151,10 +156,20 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
151
156
  var _a;
152
157
  return (this.translationDestinationLanguage && !this.translationError) ? this.translationDestinationLanguage.code : (_a = this.map) === null || _a === void 0 ? void 0 : _a.lang;
153
158
  }
159
+ handleLinkPreviews() {
160
+ var _a;
161
+ if (this.linkPreviewDialogId) {
162
+ (_a = this.crossMapLinks) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
163
+ link.setAttribute("role", "button");
164
+ link.setAttribute("aria-haspopup", "dialog");
165
+ link.setAttribute("aria-controls", this.linkPreviewDialogId);
166
+ });
167
+ }
168
+ }
154
169
  }
155
170
  FtReaderTopicContent.styles = [
156
171
  styles,
157
- highlightHtmlStyles
172
+ highlightHtmlStyles,
158
173
  ];
159
174
  __decorate([
160
175
  redux()
@@ -174,6 +189,9 @@ __decorate([
174
189
  __decorate([
175
190
  redux({ selector: (s) => s.translation.isError })
176
191
  ], FtReaderTopicContent.prototype, "translationError", void 0);
192
+ __decorate([
193
+ redux()
194
+ ], FtReaderTopicContent.prototype, "linkPreviewDialogId", void 0);
177
195
  __decorate([
178
196
  redux()
179
197
  ], FtReaderTopicContent.prototype, "scrollTarget", void 0);
@@ -195,4 +213,7 @@ __decorate([
195
213
  __decorate([
196
214
  query("section.topic")
197
215
  ], FtReaderTopicContent.prototype, "topicContainer", void 0);
216
+ __decorate([
217
+ queryAll("a.ft-internal-xlink")
218
+ ], FtReaderTopicContent.prototype, "crossMapLinks", void 0);
198
219
  export { FtReaderTopicContent };