@operato/help 10.29.33 → 10.29.34

package/dist/src/pages/ox-help-home.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-help-home.js","sourceRoot":"","sources":["../../../src/pages/ox-help-home.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport Headroom from '@operato/headroom'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-help-home')\nclass HelpHome extends localize(i18next)(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    HeadroomStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        position: relative;\n\n        --md-icon-size: 24px;\n      }\n\n      #navigation {\n        position: absolute;\n        display: flex;\n        width: 100%;\n        padding: var(--help-navigation-padding);\n        border-bottom: var(--help-navigation-bottom);\n        background-color: var(--md-sys-color-surface);\n      }\n\n      #navigation md-icon {\n        padding: var(--help-navigation-icon-padding, var(--padding-default));\n        border-right: var(--help-navigation-icon-border);\n        cursor: pointer;\n        color: var(--help-icon-color);\n      }\n\n      #content {\n        flex: 1;\n\n        overflow: auto;\n        padding: var(--help-panel-content-padding);\n        margin: var(--help-panel-margin);\n      }\n\n      #upward {\n        --md-icon-size: 26px;\n        position: absolute;\n        bottom: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-fab-shadow);\n        padding: 7px;\n\n        scroll-padding-top: 65px;\n      }\n    `\n  ]\n\n  @property({ type: String }) topic!: string\n  @property({ type: Boolean }) showGotoTop: boolean = false\n\n  @query('#content') content!: HTMLElement\n  @query('#navigation') navigation!: HTMLElement\n\n  get context() {\n    return {\n      title: i18next.t('text.help')\n    }\n  }\n\n  render() {\n    const src = this.topic && `/helps/${this.topic || 'index'}.md`\n\n    return html`\n      <ox-markdown id=\"content\" .src=${src} toc></ox-markdown>\n\n      <div id=\"navigation\">\n        <md-icon @click=${() => navigate('help')} ?disabled=${this.topic == 'index'}>home</md-icon>\n        <md-icon @click=${() => window.history.back()}>keyboard_arrow_left</md-icon>\n        <md-icon @click=${() => window.history.forward()}>keyboard_arrow_right</md-icon>\n      </div>\n\n      ${this.showGotoTop\n        ? html` <md-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `\n        : html``}\n    `\n  }\n\n  override async firstUpdated() {\n    this.content.addEventListener('scroll', (e: Event) => {\n      this.showGotoTop = (e.target as HTMLElement)?.scrollTop !== 0\n    })\n\n    await this.requestUpdate()\n\n    var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'))\n    this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px'\n\n    var headroom = new Headroom(this.navigation, {\n      scroller: this.content\n    })\n\n    headroom.init()\n  }\n\n  override async pageUpdated(changes: any, lifecycle: any) {\n    if (this.active) {\n      this.topic = lifecycle.params['topic'] || 'index'\n      this.content.scrollTop = 0\n    }\n  }\n\n  gotoTop(e: Event) {\n    this.content.scrollTop = 0\n\n    e.stopPropagation()\n  }\n}\n"]}
+{"version":3,"file":"ox-help-home.js","sourceRoot":"","sources":["../../../src/pages/ox-help-home.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../components/ox-doc.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport Headroom from '@operato/headroom'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\nimport { helpFormatOf } from '../help-documents.js'\n\n@customElement('ox-help-home')\nclass HelpHome extends localize(i18next)(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    HeadroomStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        position: relative;\n\n        --md-icon-size: 24px;\n      }\n\n      #navigation {\n        position: absolute;\n        display: flex;\n        width: 100%;\n        padding: var(--help-navigation-padding);\n        border-bottom: var(--help-navigation-bottom);\n        background-color: var(--md-sys-color-surface);\n      }\n\n      #navigation md-icon {\n        padding: var(--help-navigation-icon-padding, var(--padding-default));\n        border-right: var(--help-navigation-icon-border);\n        cursor: pointer;\n        color: var(--help-icon-color);\n      }\n\n      #content {\n        flex: 1;\n\n        overflow: auto;\n        padding: var(--help-panel-content-padding);\n        margin: var(--help-panel-margin);\n      }\n\n      #upward {\n        --md-icon-size: 26px;\n        position: absolute;\n        bottom: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-fab-shadow);\n        padding: 7px;\n\n        scroll-padding-top: 65px;\n      }\n    `\n  ]\n\n  @property({ type: String }) topic!: string\n  /** The section to open at - the part a `?` showed in the help overlay. */\n  @property({ type: String }) section: string = ''\n  @property({ type: Boolean }) showGotoTop: boolean = false\n  /** How the topic is written (`helpFormatOf`): an html document or the markdown this page always read. */\n  @state() format?: 'html' | 'md'\n\n  @query('#content') content!: HTMLElement\n  @query('#navigation') navigation!: HTMLElement\n\n  get context() {\n    return {\n      title: i18next.t('text.help')\n    }\n  }\n\n  render() {\n    const src = this.topic && `/helps/${this.topic || 'index'}.md`\n\n    return html`\n      <div id=\"content\">\n        ${this.format === 'html'\n          ? html`<ox-doc topic=${this.topic} anchor=${this.section}></ox-doc>`\n          : this.format === 'md'\n            ? html`<ox-markdown .src=${src} toc></ox-markdown>`\n            : ''}\n      </div>\n\n      <div id=\"navigation\">\n        <md-icon @click=${() => navigate('help')} ?disabled=${this.topic == 'index'}>home</md-icon>\n        <md-icon @click=${() => window.history.back()}>keyboard_arrow_left</md-icon>\n        <md-icon @click=${() => window.history.forward()}>keyboard_arrow_right</md-icon>\n      </div>\n\n      ${this.showGotoTop\n        ? html` <md-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `\n        : html``}\n    `\n  }\n\n  override async firstUpdated() {\n    this.content.addEventListener('scroll', (e: Event) => {\n      this.showGotoTop = (e.target as HTMLElement)?.scrollTop !== 0\n    })\n\n    await this.requestUpdate()\n\n    var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'))\n    this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px'\n\n    var headroom = new Headroom(this.navigation, {\n      scroller: this.content\n    })\n\n    headroom.init()\n  }\n\n  override async pageUpdated(changes: any, lifecycle: any) {\n    if (this.active) {\n      this.topic = lifecycle.params['topic'] || 'index'\n      this.section = lifecycle.params['section'] || ''\n      this.content.scrollTop = 0\n    }\n  }\n\n  updated(changes: Map<string, unknown>) {\n    super.updated?.(changes as any)\n    if (changes.has('topic')) {\n      const topic = this.topic\n      this.format = undefined\n      if (topic) helpFormatOf(topic, i18next?.language ?? 'en').then(format => topic === this.topic && (this.format = format))\n    }\n  }\n\n  gotoTop(e: Event) {\n    this.content.scrollTop = 0\n\n    e.stopPropagation()\n  }\n}\n"]}

package/dist/src/viewparts/ox-help-panel.d.ts

@@ -1,2 +1,3 @@
 import '@material/web/icon/icon.js';
 import '@operato/markdown/ox-markdown.js';
+import '../components/ox-doc.js';

package/dist/src/viewparts/ox-help-panel.js

@@ -1,21 +1,27 @@
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
 import '@operato/markdown/ox-markdown.js';
+import '../components/ox-doc.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import Headroom from '@operato/headroom';
 import { closeOverlay } from '@operato/layout';
 import { navigate } from '@operato/shell';
+import { i18next } from '@operato/i18n';
 import { HeadroomStyles, ScrollbarStyles } from '@operato/styles';
+import { helpFormatOf } from '../help-documents.js';
 let HelpPanel = class HelpPanel extends LitElement {
     constructor() {
         super(...arguments);
+        /** The one section a `?` asked about; the overlay shows that part, and 「open in new」 the whole document at it. */
+        this.section = '';
         this.showGotoTop = false;
         this.historyIndex = -1;
         this.history = [];
     }
     render() {
         const src = this.topic && `/helps/${this.topic}.md`;
+        const full = `help?topic=${encodeURIComponent(this.topic)}${this.section ? `&section=${encodeURIComponent(this.section)}` : ''}`;
         return html `
       <div id="navigation">
         <md-icon filled @click=${() => this.goHome()} ?disabled=${this.history[0] === this.history[this.historyIndex]}>
@@ -27,14 +33,20 @@ let HelpPanel = class HelpPanel extends LitElement {
         <md-icon filled @click=${() => this.historyForward()} ?disabled=${this.historyIndex >= this.history.length - 1}>
           keyboard_arrow_right
         </md-icon>
-        <md-icon filled @click=${() => navigate(`help?topic=${this.topic}`)}> open_in_new </md-icon>
+        <md-icon filled @click=${() => navigate(full)}> open_in_new </md-icon>
         <md-icon filled id="close" @click=${() => closeOverlay('help')}> close </md-icon>
       </div>
 
       ${!this.showGotoTop
             ? html ``
             : html ` <md-icon filled id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</md-icon> `}
-      <ox-markdown id="content" .src=${src}></ox-markdown>
+      <div id="content">
+        ${this.format === 'html'
+            ? html `<ox-doc compact topic=${this.topic} section=${this.section} @ox-doc-topic=${(e) => this.follow(e.detail.topic)}></ox-doc>`
+            : this.format === 'md'
+                ? html `<ox-markdown .src=${src}></ox-markdown>`
+                : ''}
+      </div>
     `;
     }
     async firstUpdated() {
@@ -52,13 +64,21 @@ let HelpPanel = class HelpPanel extends LitElement {
         headroom.init();
     }
     async updated(changes) {
+        var _a;
         if (changes.has('topic')) {
+            const topic = this.topic;
+            this.format = undefined;
+            if (topic)
+                helpFormatOf(topic, (_a = i18next === null || i18next === void 0 ? void 0 : i18next.language) !== null && _a !== void 0 ? _a : 'en').then(format => topic === this.topic && (this.format = format));
             if (this.historyIndex === -1) {
                 this.history = [this.topic];
                 this.historyIndex = 0;
             }
         }
         if (changes.has('historyIndex')) {
+            /* Moving through the history leaves the section the `?` opened at. */
+            if (this.history[this.historyIndex] !== this.topic)
+                this.section = '';
             this.topic = this.history[this.historyIndex];
             this.content.scrollTop = 0;
         }
@@ -93,6 +113,13 @@ let HelpPanel = class HelpPanel extends LitElement {
             return;
         });
     }
+    /** A link inside an html document took it to another topic: the overlay follows, as with a markdown link. */
+    follow(topic) {
+        if (!topic || topic === this.topic)
+            return;
+        this.history = [...this.history.slice(0, this.historyIndex + 1), topic];
+        this.historyIndex++;
+    }
     gotoTop(e) {
         this.content.scrollTop = 0;
         e.stopPropagation();
@@ -195,9 +222,15 @@ HelpPanel.styles = [
 __decorate([
     property({ type: String })
 ], HelpPanel.prototype, "topic", void 0);
+__decorate([
+    property({ type: String })
+], HelpPanel.prototype, "section", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelpPanel.prototype, "showGotoTop", void 0);
+__decorate([
+    state()
+], HelpPanel.prototype, "format", void 0);
 __decorate([
     state()
 ], HelpPanel.prototype, "historyIndex", void 0);

package/dist/src/viewparts/ox-help-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-help-panel.js","sourceRoot":"","sources":["../../../src/viewparts/ox-help-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/markdown/ox-markdown.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport Headroom from '@operato/headroom'\nimport { closeOverlay } from '@operato/layout'\nimport { navigate } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-help-panel')\nclass HelpPanel extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    HeadroomStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--help-panel-background-color);\n\n        position: relative;\n        width: var(--help-panel-width);\n        max-height: 90%;\n        border-radius: var(--help-panel-border-raidus);\n        border: var(--help-panel-border);\n        box-shadow: var(--help-panel-box-shadow);\n        color: var(--help-panel-color);\n        margin: 4px;\n\n        overflow: hidden;\n\n        --md-icon-size: 24px;\n      }\n\n      :host(:focus) {\n        outline: none;\n      }\n\n      #navigation {\n        display: flex;\n        position: absolute;\n        width: 100%;\n        padding: var(--help-navigation-padding);\n        border-bottom: var(--help-navigation-bottom);\n        background-color: var(--md-sys-color-surface);\n      }\n\n      #navigation md-icon {\n        padding: var(--help-navigation-icon-padding, var(--padding-default));\n        border-right: var(--help-navigation-icon-border);\n        cursor: pointer;\n        color: var(--help-icon-color);\n      }\n\n      #close {\n        margin-left: auto;\n        border-right: 0;\n      }\n\n      #content {\n        flex: 1;\n        overflow: auto;\n        padding: var(--help-panel-content-padding);\n        margin: var(--help-panel-margin);\n      }\n\n      #upward {\n        --md-icon-size: 26px;\n        position: absolute;\n        bottom: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-fab-shadow);\n        padding: 7px;\n      }\n\n      md-icon[filled] {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          height: 100%;\n          max-height: 100%;\n          margin: 0;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) topic!: string\n  @property({ type: Boolean }) showGotoTop: boolean = false\n\n  @state() historyIndex: number = -1\n  @state() history: string[] = []\n\n  @query('#content') content!: HTMLElement\n  @query('#navigation') navigation!: HTMLElement\n\n  render() {\n    const src = this.topic && `/helps/${this.topic}.md`\n\n    return html`\n      <div id=\"navigation\">\n        <md-icon filled @click=${() => this.goHome()} ?disabled=${this.history[0] === this.history[this.historyIndex]}>\n          home\n        </md-icon>\n        <md-icon filled @click=${() => this.historyBack()} ?disabled=${this.historyIndex < 1}>\n          keyboard_arrow_left\n        </md-icon>\n        <md-icon filled @click=${() => this.historyForward()} ?disabled=${this.historyIndex >= this.history.length - 1}>\n          keyboard_arrow_right\n        </md-icon>\n        <md-icon filled @click=${() => navigate(`help?topic=${this.topic}`)}> open_in_new </md-icon>\n        <md-icon filled id=\"close\" @click=${() => closeOverlay('help')}> close </md-icon>\n      </div>\n\n      ${!this.showGotoTop\n        ? html``\n        : html` <md-icon filled id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}\n      <ox-markdown id=\"content\" .src=${src}></ox-markdown>\n    `\n  }\n\n  async firstUpdated() {\n    this.setupRouter()\n\n    this.content.addEventListener('scroll', (e: Event) => {\n      this.showGotoTop = (e.target as HTMLElement)?.scrollTop !== 0\n    })\n\n    await this.requestUpdate()\n\n    var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'))\n    this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px'\n\n    var headroom = new Headroom(this.navigation, {\n      scroller: this.content\n    })\n    headroom.init()\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('topic')) {\n      if (this.historyIndex === -1) {\n        this.history = [this.topic]\n        this.historyIndex = 0\n      }\n    }\n\n    if (changes.has('historyIndex')) {\n      this.topic = this.history[this.historyIndex]\n      this.content.scrollTop = 0\n    }\n  }\n\n  setupRouter() {\n    this.addEventListener('click', e => {\n      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {\n        return\n      }\n\n      const anchor = e.composedPath().filter(n => (n as HTMLElement).tagName === 'A')[0] as HTMLAnchorElement\n      if (!anchor || anchor.target || anchor.hasAttribute('download') || anchor.getAttribute('rel') === 'external') {\n        return\n      }\n\n      const href = anchor.href\n      const newUrl = new URL(href, document.baseURI)\n      if (!href || href.indexOf('mailto:') !== -1 || newUrl.origin !== location.origin) {\n        return\n      }\n\n      e.preventDefault()\n      e.stopPropagation()\n\n      const pathname = newUrl.pathname\n      const topic = newUrl.searchParams?.get('topic')\n      if (pathname.endsWith('/help') && topic) {\n        this.history = [...this.history.slice(0, this.historyIndex + 1), topic]\n        this.historyIndex++\n        this.topic = topic\n      } else {\n        navigate(href)\n      }\n\n      return\n    })\n  }\n\n  gotoTop(e: Event) {\n    this.content.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  goHome() {\n    if (!this.history?.[0] || this.history[0] == this.topic) {\n      return\n    }\n    this.history.push(this.history[0])\n    this.historyIndex = this.history.length - 1\n  }\n\n  historyBack() {\n    this.historyIndex > 0 && this.historyIndex--\n  }\n\n  historyForward() {\n    this.history && this.historyIndex < this.history.length - 1 && this.historyIndex++\n  }\n}\n"]}
+{"version":3,"file":"ox-help-panel.js","sourceRoot":"","sources":["../../../src/viewparts/ox-help-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/markdown/ox-markdown.js'\nimport '../components/ox-doc.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport Headroom from '@operato/headroom'\nimport { closeOverlay } from '@operato/layout'\nimport { navigate } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\nimport { helpFormatOf } from '../help-documents.js'\n\n@customElement('ox-help-panel')\nclass HelpPanel extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    HeadroomStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--help-panel-background-color);\n\n        position: relative;\n        width: var(--help-panel-width);\n        max-height: 90%;\n        border-radius: var(--help-panel-border-raidus);\n        border: var(--help-panel-border);\n        box-shadow: var(--help-panel-box-shadow);\n        color: var(--help-panel-color);\n        margin: 4px;\n\n        overflow: hidden;\n\n        --md-icon-size: 24px;\n      }\n\n      :host(:focus) {\n        outline: none;\n      }\n\n      #navigation {\n        display: flex;\n        position: absolute;\n        width: 100%;\n        padding: var(--help-navigation-padding);\n        border-bottom: var(--help-navigation-bottom);\n        background-color: var(--md-sys-color-surface);\n      }\n\n      #navigation md-icon {\n        padding: var(--help-navigation-icon-padding, var(--padding-default));\n        border-right: var(--help-navigation-icon-border);\n        cursor: pointer;\n        color: var(--help-icon-color);\n      }\n\n      #close {\n        margin-left: auto;\n        border-right: 0;\n      }\n\n      #content {\n        flex: 1;\n        overflow: auto;\n        padding: var(--help-panel-content-padding);\n        margin: var(--help-panel-margin);\n      }\n\n      #upward {\n        --md-icon-size: 26px;\n        position: absolute;\n        bottom: var(--data-list-fab-position-vertical);\n        right: var(--data-list-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-list-fab-color);\n        box-shadow: var(--data-list-fab-shadow);\n        padding: 7px;\n      }\n\n      md-icon[filled] {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          height: 100%;\n          max-height: 100%;\n          margin: 0;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) topic!: string\n  /** The one section a `?` asked about; the overlay shows that part, and 「open in new」 the whole document at it. */\n  @property({ type: String }) section: string = ''\n  @property({ type: Boolean }) showGotoTop: boolean = false\n  /** How the topic is written (`helpFormatOf`) - undefined while it is being asked. */\n  @state() format?: 'html' | 'md'\n\n  @state() historyIndex: number = -1\n  @state() history: string[] = []\n\n  @query('#content') content!: HTMLElement\n  @query('#navigation') navigation!: HTMLElement\n\n  render() {\n    const src = this.topic && `/helps/${this.topic}.md`\n    const full = `help?topic=${encodeURIComponent(this.topic)}${this.section ? `&section=${encodeURIComponent(this.section)}` : ''}`\n\n    return html`\n      <div id=\"navigation\">\n        <md-icon filled @click=${() => this.goHome()} ?disabled=${this.history[0] === this.history[this.historyIndex]}>\n          home\n        </md-icon>\n        <md-icon filled @click=${() => this.historyBack()} ?disabled=${this.historyIndex < 1}>\n          keyboard_arrow_left\n        </md-icon>\n        <md-icon filled @click=${() => this.historyForward()} ?disabled=${this.historyIndex >= this.history.length - 1}>\n          keyboard_arrow_right\n        </md-icon>\n        <md-icon filled @click=${() => navigate(full)}> open_in_new </md-icon>\n        <md-icon filled id=\"close\" @click=${() => closeOverlay('help')}> close </md-icon>\n      </div>\n\n      ${!this.showGotoTop\n        ? html``\n        : html` <md-icon filled id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}\n      <div id=\"content\">\n        ${this.format === 'html'\n          ? html`<ox-doc compact topic=${this.topic} section=${this.section} @ox-doc-topic=${(e: CustomEvent) => this.follow(e.detail.topic)}></ox-doc>`\n          : this.format === 'md'\n            ? html`<ox-markdown .src=${src}></ox-markdown>`\n            : ''}\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    this.setupRouter()\n\n    this.content.addEventListener('scroll', (e: Event) => {\n      this.showGotoTop = (e.target as HTMLElement)?.scrollTop !== 0\n    })\n\n    await this.requestUpdate()\n\n    var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'))\n    this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px'\n\n    var headroom = new Headroom(this.navigation, {\n      scroller: this.content\n    })\n    headroom.init()\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('topic')) {\n      const topic = this.topic\n      this.format = undefined\n      if (topic) helpFormatOf(topic, i18next?.language ?? 'en').then(format => topic === this.topic && (this.format = format))\n      if (this.historyIndex === -1) {\n        this.history = [this.topic]\n        this.historyIndex = 0\n      }\n    }\n\n    if (changes.has('historyIndex')) {\n      /* Moving through the history leaves the section the `?` opened at. */\n      if (this.history[this.historyIndex] !== this.topic) this.section = ''\n      this.topic = this.history[this.historyIndex]\n      this.content.scrollTop = 0\n    }\n  }\n\n  setupRouter() {\n    this.addEventListener('click', e => {\n      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {\n        return\n      }\n\n      const anchor = e.composedPath().filter(n => (n as HTMLElement).tagName === 'A')[0] as HTMLAnchorElement\n      if (!anchor || anchor.target || anchor.hasAttribute('download') || anchor.getAttribute('rel') === 'external') {\n        return\n      }\n\n      const href = anchor.href\n      const newUrl = new URL(href, document.baseURI)\n      if (!href || href.indexOf('mailto:') !== -1 || newUrl.origin !== location.origin) {\n        return\n      }\n\n      e.preventDefault()\n      e.stopPropagation()\n\n      const pathname = newUrl.pathname\n      const topic = newUrl.searchParams?.get('topic')\n      if (pathname.endsWith('/help') && topic) {\n        this.history = [...this.history.slice(0, this.historyIndex + 1), topic]\n        this.historyIndex++\n        this.topic = topic\n      } else {\n        navigate(href)\n      }\n\n      return\n    })\n  }\n\n  /** A link inside an html document took it to another topic: the overlay follows, as with a markdown link. */\n  follow(topic: string) {\n    if (!topic || topic === this.topic) return\n    this.history = [...this.history.slice(0, this.historyIndex + 1), topic]\n    this.historyIndex++\n  }\n\n  gotoTop(e: Event) {\n    this.content.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  goHome() {\n    if (!this.history?.[0] || this.history[0] == this.topic) {\n      return\n    }\n    this.history.push(this.history[0])\n    this.historyIndex = this.history.length - 1\n  }\n\n  historyBack() {\n    this.historyIndex > 0 && this.historyIndex--\n  }\n\n  historyForward() {\n    this.history && this.historyIndex < this.history.length - 1 && this.historyIndex++\n  }\n}\n"]}

package/dist/test/ox-doc.test.d.ts

@@ -1,2 +1,3 @@
 import '../src/components/ox-doc.js';
 import '../src/components/ox-help-spot.js';
+import '../src/viewparts/ox-help-panel.js';

package/dist/test/ox-doc.test.js

@@ -1,6 +1,9 @@
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import '../src/components/ox-doc.js';
 import '../src/components/ox-help-spot.js';
+import '../src/viewparts/ox-help-panel.js';
+import { appendViewpart, VIEWPART_POSITION } from '@operato/layout';
+import { store } from '@operato/shell';
 /**
  * ox-doc reads /helps/{topic}.html and renders it; the products that used to keep their own copy rely on
  * these behaviours.
@@ -60,45 +63,25 @@ describe('ox-doc', () => {
     });
 });
 describe('ox-help-spot', () => {
-    /* Its two links are words of the reader's language, not English left in a Korean screen. */
-    it('names its links in the reader\'s language', async () => {
-        const { i18next } = await import('@operato/i18n');
-        i18next.addResourceBundle(i18next.language || 'en', 'translations', { 'button.close': '닫기', 'text.help-open-full': '전체 보기' }, true, true);
-        const el = await fixture(html `<ox-help-spot topic="a/one" section="part"></ox-help-spot>`);
-        await waitUntil(() => el.shadowRoot.querySelector('button.q'));
-        el.shadowRoot.querySelector('button.q').click();
-        await waitUntil(() => el.shadowRoot.querySelector('.bar'));
-        const bar = el.shadowRoot.querySelector('.bar').textContent.replace(/\s+/g, ' ');
-        expect(bar).to.contain('전체 보기');
-        expect(bar).to.contain('닫기');
-        expect(bar).not.to.contain('close');
-    });
-    it('opens the section in place and closes on Escape', async () => {
-        const el = await fixture(html `<ox-help-spot topic="a/one" section="part"></ox-help-spot>`);
-        await waitUntil(() => el.shadowRoot.querySelector('button.q'));
-        el.shadowRoot.querySelector('button.q').click();
-        await waitUntil(() => el.shadowRoot.querySelector('ox-doc'));
-        /* The dialog says what opened and can take focus (operato-twin's overlay guard asks both). */
-        const panel = el.shadowRoot.querySelector('.panel');
-        expect(panel.getAttribute('aria-label')).to.equal('help');
-        expect(panel.getAttribute('tabindex')).to.equal('-1');
-        const doc = el.shadowRoot.querySelector('ox-doc');
-        expect(doc.getAttribute('section')).to.equal('part');
-        expect(doc.hasAttribute('compact')).to.equal(true);
-        el.shadowRoot.querySelector('.panel').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
-        await waitUntil(() => !el.shadowRoot.querySelector('.panel'));
-    });
-    /* A `?` in a grid header sits in nowrap, bold, right-aligned text; its panel is a document and must not take those. */
-    it('opens a panel that wraps and reads from the start, whatever the text around the ?', async () => {
-        const host = await fixture(html `<div style="white-space: nowrap; text-align: right; font-weight: 700; width: 120px"><ox-help-spot topic="a/one" section="part"></ox-help-spot></div>`);
+    /*
+     * The `?` opens the app's help overlay at its section and draws no panel of its own: one drawn inside it sat in
+     * whatever held the `?` (a card button, a grid header), took that parent's pointer and text settings, and handed
+     * its scrolling and presses back to it. The press of the `?` itself is not a press of its parent either.
+     */
+    it('opens the help overlay at its section, and its press does not reach what holds it', async () => {
+        var _a, _b;
+        appendViewpart({ name: 'help', viewpart: { show: false, hovering: 'edge', template: html `<ox-help-panel></ox-help-panel>` }, position: VIEWPART_POSITION.ASIDEBAR });
+        let parentPresses = 0;
+        const host = await fixture(html `<button style="cursor: pointer" @click=${() => parentPresses++} @pointerdown=${() => parentPresses++}><ox-help-spot topic="a/one" section="part"></ox-help-spot></button>`);
         const el = host.querySelector('ox-help-spot');
         await waitUntil(() => el.shadowRoot.querySelector('button.q'));
-        el.shadowRoot.querySelector('button.q').click();
-        await waitUntil(() => el.shadowRoot.querySelector('.panel'));
-        const panel = getComputedStyle(el.shadowRoot.querySelector('.panel'));
-        expect(panel.whiteSpace).to.equal('normal');
-        expect(panel.textAlign).to.equal('start');
-        expect(panel.fontWeight).to.equal('400');
+        const q = el.shadowRoot.querySelector('button.q');
+        q.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+        q.click();
+        expect(parentPresses).to.equal(0);
+        expect(el.shadowRoot.querySelector('.panel, ox-doc')).to.equal(null);
+        expect((_b = (_a = history.state) === null || _a === void 0 ? void 0 : _a.overlay) === null || _b === void 0 ? void 0 : _b.name).to.equal('help');
+        expect(store.getState().layout.viewparts.help.templateProperties).to.deep.equal({ topic: 'a/one', section: 'part' });
     });
     /* A `?` is placed before its help is written; it must not open 「Content not found」 or the whole document. */
     it('stays out of sight until its topic is written', async () => {
@@ -118,4 +101,23 @@ describe('ox-help-spot', () => {
         expect(missing.hasAttribute('hidden')).to.equal(true);
     });
 });
+describe('ox-help-panel', () => {
+    /* The overlay shows what a `?` asked about - an html document's section - and the older markdown topics as before. */
+    it('shows an html topic through ox-doc at the section, and a markdown topic as markdown', async () => {
+        const html1 = await fixture(html `<ox-help-panel topic="a/one" section="part"></ox-help-panel>`);
+        await waitUntil(() => html1.shadowRoot.querySelector('ox-doc'));
+        const doc = html1.shadowRoot.querySelector('ox-doc');
+        expect([doc.getAttribute('topic'), doc.getAttribute('section'), doc.hasAttribute('compact')]).to.deep.equal(['a/one', 'part', true]);
+        const md = await fixture(html `<ox-help-panel topic="b/md"></ox-help-panel>`);
+        await waitUntil(() => md.shadowRoot.querySelector('ox-markdown'));
+        expect(md.shadowRoot.querySelector('ox-doc')).to.equal(null);
+    });
+});
+describe('ox-doc anchor', () => {
+    /* The help page opens the whole document at the part the overlay showed. */
+    it('scrolls its scrolling parent to the anchor once the document is drawn', async () => {
+        const box = await fixture(html `<div style="height: 40px; overflow: auto"><ox-doc topic="a/one" anchor="next"></ox-doc></div>`);
+        await waitUntil(() => box.scrollTop > 0, 'the box scrolls to #next');
+    });
+});
 //# sourceMappingURL=ox-doc.test.js.map

package/dist/test/ox-doc.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-doc.test.js","sourceRoot":"","sources":["../../test/ox-doc.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html, waitUntil } from '@open-wc/testing'\n\nimport '../src/components/ox-doc.js'\nimport '../src/components/ox-help-spot.js'\nimport type { OxDoc } from '../src/components/ox-doc.js'\n\n/**\n * ox-doc reads /helps/{topic}.html and renders it; the products that used to keep their own copy rely on\n * these behaviours.\n */\nconst DOCS: Record<string, string> = {\n  'a/one': `<h1 id=\"top\">One</h1><p>lead</p><h2 id=\"part\">Part</h2><p>in part</p><table><tr><td>x</td></tr></table><h2 id=\"next\">Next</h2><p>after</p><a data-topic=\"a/two#end\">two</a>`,\n  'a/two': `<h1>Two</h1><h2 id=\"end\">End</h2>`\n}\n\nlet requests: string[] = []\nconst realFetch = window.fetch\n\nbeforeEach(() => {\n  requests = []\n  window.fetch = (async (input: RequestInfo | URL) => {\n    const url = String(input)\n    requests.push(url)\n    const topic = url.replace(/^\\/helps\\//, '').replace(/\\.html.*$/, '')\n    return DOCS[topic] ? new Response(DOCS[topic]) : new Response('', { status: 404 })\n  }) as typeof window.fetch\n})\n\nafterEach(() => {\n  window.fetch = realFetch\n})\n\nconst bodyOf = (el: OxDoc) => el.shadowRoot!.querySelector('.body') as HTMLElement\n\ndescribe('ox-doc', () => {\n  it('reads /helps/{topic}.html with the language and renders it', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/one\"></ox-doc>`)\n    await waitUntil(() => bodyOf(el)?.querySelector('h1'))\n\n    expect(requests[0]).to.match(/^\\/helps\\/a\\/one\\.html\\?lng=/)\n    expect(bodyOf(el).querySelector('h1')!.textContent).to.equal('One')\n  })\n\n  it('wraps tables in a scrolling box so they do not push the page wide', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/one\"></ox-doc>`)\n    await waitUntil(() => bodyOf(el)?.querySelector('table'))\n\n    expect(bodyOf(el).querySelector('table')!.parentElement!.classList.contains('tablewrap')).to.equal(true)\n  })\n\n  it('shows only the named section, up to the next heading of its level', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/one\" section=\"part\"></ox-doc>`)\n    await waitUntil(() => bodyOf(el)?.querySelector('h2'))\n\n    expect(bodyOf(el).textContent).to.contain('in part')\n    expect(bodyOf(el).textContent).to.not.contain('lead')\n    expect(bodyOf(el).textContent).to.not.contain('after')\n  })\n\n  it('follows a topic link in place and tells the host, without keeping the anchor in the file name', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/one\"></ox-doc>`)\n    await waitUntil(() => bodyOf(el)?.querySelector('a[data-topic]'))\n\n    let told: any\n    el.addEventListener('ox-doc-topic', e => (told = (e as CustomEvent).detail))\n    ;(bodyOf(el).querySelector('a[data-topic]') as HTMLElement).click()\n    await waitUntil(() => bodyOf(el)?.querySelector('h1')?.textContent === 'Two')\n\n    expect(told).to.deep.equal({ topic: 'a/two', hash: 'end' })\n    expect(requests[requests.length - 1]).to.match(/^\\/helps\\/a\\/two\\.html\\?/)\n  })\n\n  it('says the topic is missing instead of showing an empty page', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/none\"></ox-doc>`)\n    await waitUntil(() => el.shadowRoot!.querySelector('.status.err'))\n\n    expect(el.shadowRoot!.querySelector('.status.err')!.textContent).to.contain('a/none')\n  })\n})\n\ndescribe('ox-help-spot', () => {\n  /* Its two links are words of the reader's language, not English left in a Korean screen. */\n  it('names its links in the reader\\'s language', async () => {\n    const { i18next } = await import('@operato/i18n')\n    i18next.addResourceBundle(i18next.language || 'en', 'translations', { 'button.close': '닫기', 'text.help-open-full': '전체 보기' }, true, true)\n    const el = await fixture<HTMLElement>(html`<ox-help-spot topic=\"a/one\" section=\"part\"></ox-help-spot>`)\n    await waitUntil(() => el.shadowRoot!.querySelector('button.q'))\n    ;(el.shadowRoot!.querySelector('button.q') as HTMLButtonElement).click()\n    await waitUntil(() => el.shadowRoot!.querySelector('.bar'))\n\n    const bar = el.shadowRoot!.querySelector('.bar')!.textContent!.replace(/\\s+/g, ' ')\n    expect(bar).to.contain('전체 보기')\n    expect(bar).to.contain('닫기')\n    expect(bar).not.to.contain('close')\n  })\n\n  it('opens the section in place and closes on Escape', async () => {\n    const el = await fixture<HTMLElement>(html`<ox-help-spot topic=\"a/one\" section=\"part\"></ox-help-spot>`)\n    await waitUntil(() => el.shadowRoot!.querySelector('button.q'))\n    ;(el.shadowRoot!.querySelector('button.q') as HTMLButtonElement).click()\n    await waitUntil(() => el.shadowRoot!.querySelector('ox-doc'))\n\n    /* The dialog says what opened and can take focus (operato-twin's overlay guard asks both). */\n    const panel = el.shadowRoot!.querySelector('.panel')!\n    expect(panel.getAttribute('aria-label')).to.equal('help')\n    expect(panel.getAttribute('tabindex')).to.equal('-1')\n\n    const doc = el.shadowRoot!.querySelector('ox-doc') as OxDoc\n    expect(doc.getAttribute('section')).to.equal('part')\n    expect(doc.hasAttribute('compact')).to.equal(true)\n\n    el.shadowRoot!.querySelector('.panel')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }))\n    await waitUntil(() => !el.shadowRoot!.querySelector('.panel'))\n  })\n\n  /* A `?` in a grid header sits in nowrap, bold, right-aligned text; its panel is a document and must not take those. */\n  it('opens a panel that wraps and reads from the start, whatever the text around the ?', async () => {\n    const host = await fixture<HTMLElement>(\n      html`<div style=\"white-space: nowrap; text-align: right; font-weight: 700; width: 120px\"><ox-help-spot topic=\"a/one\" section=\"part\"></ox-help-spot></div>`\n    )\n    const el = host.querySelector('ox-help-spot') as HTMLElement\n    await waitUntil(() => el.shadowRoot!.querySelector('button.q'))\n    ;(el.shadowRoot!.querySelector('button.q') as HTMLButtonElement).click()\n    await waitUntil(() => el.shadowRoot!.querySelector('.panel'))\n\n    const panel = getComputedStyle(el.shadowRoot!.querySelector('.panel')!)\n    expect(panel.whiteSpace).to.equal('normal')\n    expect(panel.textAlign).to.equal('start')\n    expect(panel.fontWeight).to.equal('400')\n  })\n\n  /* A `?` is placed before its help is written; it must not open 「Content not found」 or the whole document. */\n  it('stays out of sight until its topic is written', async () => {\n    const el = await fixture<HTMLElement>(html`<ox-help-spot topic=\"a/none\" section=\"part\"></ox-help-spot>`)\n    await waitUntil(() => requests.some(url => url.startsWith('/helps/a/none.html')))\n    await new Promise(resolve => setTimeout(resolve, 20))\n\n    expect(!!el.shadowRoot!.querySelector('button.q')).to.equal(false)\n    expect(el.hasAttribute('hidden')).to.equal(true)\n    expect(getComputedStyle(el).display).to.equal('none')\n  })\n\n  it('stays out of sight while the named section is not written', async () => {\n    const shown = await fixture<HTMLElement>(html`<ox-help-spot topic=\"a/one\" section=\"part\"></ox-help-spot>`)\n    const missing = await fixture<HTMLElement>(html`<ox-help-spot topic=\"a/one\" section=\"later\"></ox-help-spot>`)\n    await waitUntil(() => shown.shadowRoot!.querySelector('button.q'))\n    await new Promise(resolve => setTimeout(resolve, 20))\n\n    expect(!!missing.shadowRoot!.querySelector('button.q')).to.equal(false)\n    expect(missing.hasAttribute('hidden')).to.equal(true)\n  })\n})\n"]}
+{"version":3,"file":"ox-doc.test.js","sourceRoot":"","sources":["../../test/ox-doc.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html, waitUntil } from '@open-wc/testing'\n\nimport '../src/components/ox-doc.js'\nimport '../src/components/ox-help-spot.js'\nimport '../src/viewparts/ox-help-panel.js'\nimport type { OxDoc } from '../src/components/ox-doc.js'\nimport { appendViewpart, VIEWPART_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n/**\n * ox-doc reads /helps/{topic}.html and renders it; the products that used to keep their own copy rely on\n * these behaviours.\n */\nconst DOCS: Record<string, string> = {\n  'a/one': `<h1 id=\"top\">One</h1><p>lead</p><h2 id=\"part\">Part</h2><p>in part</p><table><tr><td>x</td></tr></table><h2 id=\"next\">Next</h2><p>after</p><a data-topic=\"a/two#end\">two</a>`,\n  'a/two': `<h1>Two</h1><h2 id=\"end\">End</h2>`\n}\n\nlet requests: string[] = []\nconst realFetch = window.fetch\n\nbeforeEach(() => {\n  requests = []\n  window.fetch = (async (input: RequestInfo | URL) => {\n    const url = String(input)\n    requests.push(url)\n    const topic = url.replace(/^\\/helps\\//, '').replace(/\\.html.*$/, '')\n    return DOCS[topic] ? new Response(DOCS[topic]) : new Response('', { status: 404 })\n  }) as typeof window.fetch\n})\n\nafterEach(() => {\n  window.fetch = realFetch\n})\n\nconst bodyOf = (el: OxDoc) => el.shadowRoot!.querySelector('.body') as HTMLElement\n\ndescribe('ox-doc', () => {\n  it('reads /helps/{topic}.html with the language and renders it', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/one\"></ox-doc>`)\n    await waitUntil(() => bodyOf(el)?.querySelector('h1'))\n\n    expect(requests[0]).to.match(/^\\/helps\\/a\\/one\\.html\\?lng=/)\n    expect(bodyOf(el).querySelector('h1')!.textContent).to.equal('One')\n  })\n\n  it('wraps tables in a scrolling box so they do not push the page wide', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/one\"></ox-doc>`)\n    await waitUntil(() => bodyOf(el)?.querySelector('table'))\n\n    expect(bodyOf(el).querySelector('table')!.parentElement!.classList.contains('tablewrap')).to.equal(true)\n  })\n\n  it('shows only the named section, up to the next heading of its level', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/one\" section=\"part\"></ox-doc>`)\n    await waitUntil(() => bodyOf(el)?.querySelector('h2'))\n\n    expect(bodyOf(el).textContent).to.contain('in part')\n    expect(bodyOf(el).textContent).to.not.contain('lead')\n    expect(bodyOf(el).textContent).to.not.contain('after')\n  })\n\n  it('follows a topic link in place and tells the host, without keeping the anchor in the file name', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/one\"></ox-doc>`)\n    await waitUntil(() => bodyOf(el)?.querySelector('a[data-topic]'))\n\n    let told: any\n    el.addEventListener('ox-doc-topic', e => (told = (e as CustomEvent).detail))\n    ;(bodyOf(el).querySelector('a[data-topic]') as HTMLElement).click()\n    await waitUntil(() => bodyOf(el)?.querySelector('h1')?.textContent === 'Two')\n\n    expect(told).to.deep.equal({ topic: 'a/two', hash: 'end' })\n    expect(requests[requests.length - 1]).to.match(/^\\/helps\\/a\\/two\\.html\\?/)\n  })\n\n  it('says the topic is missing instead of showing an empty page', async () => {\n    const el = await fixture<OxDoc>(html`<ox-doc topic=\"a/none\"></ox-doc>`)\n    await waitUntil(() => el.shadowRoot!.querySelector('.status.err'))\n\n    expect(el.shadowRoot!.querySelector('.status.err')!.textContent).to.contain('a/none')\n  })\n})\n\ndescribe('ox-help-spot', () => {\n  /*\n   * The `?` opens the app's help overlay at its section and draws no panel of its own: one drawn inside it sat in\n   * whatever held the `?` (a card button, a grid header), took that parent's pointer and text settings, and handed\n   * its scrolling and presses back to it. The press of the `?` itself is not a press of its parent either.\n   */\n  it('opens the help overlay at its section, and its press does not reach what holds it', async () => {\n    appendViewpart({ name: 'help', viewpart: { show: false, hovering: 'edge', template: html`<ox-help-panel></ox-help-panel>` }, position: VIEWPART_POSITION.ASIDEBAR })\n    let parentPresses = 0\n    const host = await fixture<HTMLElement>(\n      html`<button style=\"cursor: pointer\" @click=${() => parentPresses++} @pointerdown=${() => parentPresses++}><ox-help-spot topic=\"a/one\" section=\"part\"></ox-help-spot></button>`\n    )\n    const el = host.querySelector('ox-help-spot') as HTMLElement\n    await waitUntil(() => el.shadowRoot!.querySelector('button.q'))\n    const q = el.shadowRoot!.querySelector('button.q') as HTMLButtonElement\n    q.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }))\n    q.click()\n\n    expect(parentPresses).to.equal(0)\n    expect(el.shadowRoot!.querySelector('.panel, ox-doc')).to.equal(null)\n    expect(history.state?.overlay?.name).to.equal('help')\n    expect((store.getState() as any).layout.viewparts.help.templateProperties).to.deep.equal({ topic: 'a/one', section: 'part' })\n  })\n\n  /* A `?` is placed before its help is written; it must not open 「Content not found」 or the whole document. */\n  it('stays out of sight until its topic is written', async () => {\n    const el = await fixture<HTMLElement>(html`<ox-help-spot topic=\"a/none\" section=\"part\"></ox-help-spot>`)\n    await waitUntil(() => requests.some(url => url.startsWith('/helps/a/none.html')))\n    await new Promise(resolve => setTimeout(resolve, 20))\n\n    expect(!!el.shadowRoot!.querySelector('button.q')).to.equal(false)\n    expect(el.hasAttribute('hidden')).to.equal(true)\n    expect(getComputedStyle(el).display).to.equal('none')\n  })\n\n  it('stays out of sight while the named section is not written', async () => {\n    const shown = await fixture<HTMLElement>(html`<ox-help-spot topic=\"a/one\" section=\"part\"></ox-help-spot>`)\n    const missing = await fixture<HTMLElement>(html`<ox-help-spot topic=\"a/one\" section=\"later\"></ox-help-spot>`)\n    await waitUntil(() => shown.shadowRoot!.querySelector('button.q'))\n    await new Promise(resolve => setTimeout(resolve, 20))\n\n    expect(!!missing.shadowRoot!.querySelector('button.q')).to.equal(false)\n    expect(missing.hasAttribute('hidden')).to.equal(true)\n  })\n})\n\ndescribe('ox-help-panel', () => {\n  /* The overlay shows what a `?` asked about - an html document's section - and the older markdown topics as before. */\n  it('shows an html topic through ox-doc at the section, and a markdown topic as markdown', async () => {\n    const html1 = await fixture<HTMLElement>(html`<ox-help-panel topic=\"a/one\" section=\"part\"></ox-help-panel>`)\n    await waitUntil(() => html1.shadowRoot!.querySelector('ox-doc'))\n    const doc = html1.shadowRoot!.querySelector('ox-doc') as OxDoc\n    expect([doc.getAttribute('topic'), doc.getAttribute('section'), doc.hasAttribute('compact')]).to.deep.equal(['a/one', 'part', true])\n\n    const md = await fixture<HTMLElement>(html`<ox-help-panel topic=\"b/md\"></ox-help-panel>`)\n    await waitUntil(() => md.shadowRoot!.querySelector('ox-markdown'))\n    expect(md.shadowRoot!.querySelector('ox-doc')).to.equal(null)\n  })\n})\n\ndescribe('ox-doc anchor', () => {\n  /* The help page opens the whole document at the part the overlay showed. */\n  it('scrolls its scrolling parent to the anchor once the document is drawn', async () => {\n    const box = await fixture<HTMLElement>(html`<div style=\"height: 40px; overflow: auto\"><ox-doc topic=\"a/one\" anchor=\"next\"></ox-doc></div>`)\n    await waitUntil(() => box.scrollTop > 0, 'the box scrolls to #next')\n  })\n})\n"]}