@operato/help 0.3.22

package/dist/src/help-style.js

@@ -0,0 +1,122 @@
+import { css } from 'lit';
+export const HelpStyle = css `
+  h1 {
+    background-color: var(--help-panel-title-background-color);
+    margin: var(--help-panel-title-margin);
+    padding: var(--help-panel-title-padding);
+    font-size: var(--help-panel-h1-title-font-size);
+    text-transform: capitalize;
+    color: var(--help-panel-h1-title-color);
+  }
+  h2 {
+    margin: var(--help-panel-title-margin);
+    padding: var(--help-panel-title-padding);
+    font-size: var(--help-panel-h2-title-font-size);
+    color: var(--help-panel-h2-title-color);
+    text-transform: capitalize;
+  }
+  h3 {
+    margin: var(--help-panel-title-margin);
+    padding: var(--help-panel-title-padding);
+    font-size: var(--help-panel-h3-title-font-size);
+    color: var(--help-panel-h3-title-color);
+  }
+  mwc-icon {
+    vertical-align: middle;
+  }
+
+  img {
+    display: block;
+    margin: var(--margin-narrow) var(--margin-default);
+    max-width: 100%;
+  }
+  img[src*='#icon25'] {
+    width: 25px;
+    height: 25px;
+  }
+  img[src*='#icon50'] {
+    width: 50px;
+    height: 50px;
+  }
+  img[src*='#icon100'] {
+    width: 100px;
+    height: 100px;
+  }
+  img[src*='#icon25inlined'],
+  img[src*='#icon50inlined'],
+  img[src*='#icon100inlined'] {
+    display: inline-block;
+    margin: var(--margin-narrow);
+  }
+  p {
+    margin: var(--help-panel-paragraph-margin);
+    font-size: var(--help-panel-font-size);
+  }
+  [focusBox] {
+    display: block;
+    padding: var(--help-panel-focusBox-padding);
+    border: var(--help-panel-focusBox-border);
+    border-radius: var(--help-panel-focusBox-border-radius);
+    background-color: var(--help-panel-focusBox-background-color);
+    color: var(--help-panel-focusBox-color);
+  }
+
+  [subtitle] {
+    font-weight: bold;
+  }
+  [subtitle]::before {
+    content: '';
+    width: 7px;
+    height: 7px;
+    display: inline-block;
+    border: 3px solid var(--theme-white-color);
+    border-radius: 50%;
+    margin-right: var(--margin-narrow);
+  }
+  p + ol,
+  p + ul {
+    font-size: var(--help-panel-content-font-size);
+  }
+  ol,
+  ul {
+    padding: 0 0 0 30px;
+  }
+  ol li,
+  ul li {
+    margin: 0 0 2px 0;
+  }
+  a {
+    margin-bottom: 0 !important;
+    color: var(--help-panel-a-color);
+    font-size: var(--fontsize-default);
+    text-decoration: underline;
+  }
+  a mwc-icon {
+    font-size: var(--help-panel-a-icon-size);
+    margin: 0;
+  }
+  a:hover {
+    background-color: var(--opacity-light-dark-color);
+    font-weight: bold;
+  }
+
+  table {
+    border-collapse: collapse;
+    border: var(--border-dark-color);
+    font-size: 0.9em;
+  }
+  th {
+    border-top: 3px solid var(--primary-color);
+    background-color: var(--main-section-background-color);
+    color: var(--secondary-color);
+  }
+  th,
+  td {
+    border-bottom: var(--border-dark-color);
+    padding: var(--padding-narrow);
+  }
+  tr:nth-child(even) {
+    background-color: #f6f6f6;
+  }
+`;
+//# sourceMappingURL=help-style.js.map

package/dist/src/help-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"help-style.js","sourceRoot":"","sources":["../../src/help-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuH3B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const HelpStyle = css`\n  h1 {\n    background-color: var(--help-panel-title-background-color);\n    margin: var(--help-panel-title-margin);\n    padding: var(--help-panel-title-padding);\n    font-size: var(--help-panel-h1-title-font-size);\n    text-transform: capitalize;\n    color: var(--help-panel-h1-title-color);\n  }\n  h2 {\n    margin: var(--help-panel-title-margin);\n    padding: var(--help-panel-title-padding);\n    font-size: var(--help-panel-h2-title-font-size);\n    color: var(--help-panel-h2-title-color);\n    text-transform: capitalize;\n  }\n  h3 {\n    margin: var(--help-panel-title-margin);\n    padding: var(--help-panel-title-padding);\n    font-size: var(--help-panel-h3-title-font-size);\n    color: var(--help-panel-h3-title-color);\n  }\n  mwc-icon {\n    vertical-align: middle;\n  }\n\n  img {\n    display: block;\n    margin: var(--margin-narrow) var(--margin-default);\n    max-width: 100%;\n  }\n  img[src*='#icon25'] {\n    width: 25px;\n    height: 25px;\n  }\n  img[src*='#icon50'] {\n    width: 50px;\n    height: 50px;\n  }\n  img[src*='#icon100'] {\n    width: 100px;\n    height: 100px;\n  }\n  img[src*='#icon25inlined'],\n  img[src*='#icon50inlined'],\n  img[src*='#icon100inlined'] {\n    display: inline-block;\n    margin: var(--margin-narrow);\n  }\n  p {\n    margin: var(--help-panel-paragraph-margin);\n    font-size: var(--help-panel-font-size);\n  }\n  [focusBox] {\n    display: block;\n    padding: var(--help-panel-focusBox-padding);\n    border: var(--help-panel-focusBox-border);\n    border-radius: var(--help-panel-focusBox-border-radius);\n    background-color: var(--help-panel-focusBox-background-color);\n    color: var(--help-panel-focusBox-color);\n  }\n\n  [subtitle] {\n    font-weight: bold;\n  }\n  [subtitle]::before {\n    content: '';\n    width: 7px;\n    height: 7px;\n    display: inline-block;\n    border: 3px solid var(--theme-white-color);\n    border-radius: 50%;\n    margin-right: var(--margin-narrow);\n  }\n  p + ol,\n  p + ul {\n    font-size: var(--help-panel-content-font-size);\n  }\n  ol,\n  ul {\n    padding: 0 0 0 30px;\n  }\n  ol li,\n  ul li {\n    margin: 0 0 2px 0;\n  }\n  a {\n    margin-bottom: 0 !important;\n    color: var(--help-panel-a-color);\n    font-size: var(--fontsize-default);\n    text-decoration: underline;\n  }\n  a mwc-icon {\n    font-size: var(--help-panel-a-icon-size);\n    margin: 0;\n  }\n  a:hover {\n    background-color: var(--opacity-light-dark-color);\n    font-weight: bold;\n  }\n\n  table {\n    border-collapse: collapse;\n    border: var(--border-dark-color);\n    font-size: 0.9em;\n  }\n  th {\n    border-top: 3px solid var(--primary-color);\n    background-color: var(--main-section-background-color);\n    color: var(--secondary-color);\n  }\n  th,\n  td {\n    border-bottom: var(--border-dark-color);\n    padding: var(--padding-narrow);\n  }\n  tr:nth-child(even) {\n    background-color: #f6f6f6;\n  }\n`\n"]}

package/dist/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from './controller/help.js';
+export * from './grist/help-decorated-renderer.js';
+export * from './components/ox-inline-help.js';
+export * from './components/ox-title-with-help.js';
+export * from './components/ox-help-icon.js';

package/dist/src/index.js

@@ -0,0 +1,6 @@
+export * from './controller/help.js';
+export * from './grist/help-decorated-renderer.js';
+export * from './components/ox-inline-help.js';
+export * from './components/ox-title-with-help.js';
+export * from './components/ox-help-icon.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oCAAoC,CAAA;AAClD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,8BAA8B,CAAA","sourcesContent":["export * from './controller/help.js'\nexport * from './grist/help-decorated-renderer.js'\nexport * from './components/ox-inline-help.js'\nexport * from './components/ox-title-with-help.js'\nexport * from './components/ox-help-icon.js'\n"]}

package/dist/src/pages/ox-help-home.d.ts

@@ -0,0 +1 @@
+import '@material/mwc-icon-button';

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

@@ -0,0 +1,123 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon-button';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import Headroom from '@operato/headroom';
+import { i18next, localize } from '@operato/i18n';
+import { navigate, PageView, store } from '@operato/shell';
+import { HeadroomStyles, ScrollbarStyles } from '@operato/styles';
+let HelpHome = class HelpHome extends connect(store)(localize(i18next)(PageView)) {
+    constructor() {
+        super(...arguments);
+        this.showGotoTop = false;
+    }
+    get context() {
+        return {
+            title: i18next.t('text.help')
+        };
+    }
+    render() {
+        const src = this.topic && `/helps/${this.topic || 'index'}.md`;
+        return html `
+      <ox-markdown id="content" .src=${src} toc></ox-markdown>
+
+      <div id="navigation">
+        <mwc-icon-button icon="home" @click=${() => navigate('help')} ?disabled=${this.topic == 'index'}></mwc-icon-button>
+        <mwc-icon-button icon="keyboard_arrow_left"  @click=${() => window.history.back()}></mwc-icon-button icon="">
+        <mwc-icon-button icon="keyboard_arrow_right"  @click=${() => window.history.forward()}></mwc-icon-button icon="">
+      </div>      
+
+      ${this.showGotoTop
+            ? html ` <mwc-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</mwc-icon> `
+            : html ``}
+    `;
+    }
+    async firstUpdated() {
+        this.content.addEventListener('scroll', (e) => {
+            var _a;
+            this.showGotoTop = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.scrollTop) !== 0;
+        });
+        await this.requestUpdate();
+        var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'));
+        this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px';
+        var headroom = new Headroom(this.navigation, {
+            scroller: this.content
+        });
+        headroom.init();
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.topic = lifecycle.params['topic'] || 'index';
+            this.content.scrollTop = 0;
+        }
+    }
+    gotoTop(e) {
+        this.content.scrollTop = 0;
+        e.stopPropagation();
+    }
+};
+HelpHome.styles = [
+    ScrollbarStyles,
+    HeadroomStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+      }
+
+      #navigation {
+        position: absolute;
+        display: flex;
+        width: 100%;
+        padding: var(--help-navigation-padding);
+        border-bottom: var(--help-navigation-bottom);
+        background-color: white;
+      }
+      #navigation mwc-icon-button {
+        padding: var(--help-navigation-icon-padding);
+        border-right: var(--help-navigation-icon-border);
+        cursor: pointer;
+        color: var(--help-icon-color);
+      }
+      #content {
+        flex: 1;
+
+        overflow: auto;
+        padding: var(--help-panel-content-padding);
+        margin: var(--help-panel-margin);
+      }
+
+      #upward {
+        --mdc-icon-size: 26px;
+        position: absolute;
+        bottom: var(--data-list-fab-position-vertical);
+        right: var(--data-list-fab-position-horizontal);
+        background-color: rgba(255, 255, 255, 0.7);
+        border-radius: 20px;
+        color: var(--data-list-fab-color);
+        box-shadow: var(--data-list-fab-shadow);
+        padding: 7px;
+
+        scroll-padding-top: 65px;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], HelpHome.prototype, "topic", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelpHome.prototype, "showGotoTop", void 0);
+__decorate([
+    query('#content')
+], HelpHome.prototype, "content", void 0);
+__decorate([
+    query('#navigation')
+], HelpHome.prototype, "navigation", void 0);
+HelpHome = __decorate([
+    customElement('ox-help-home')
+], HelpHome);
+//# sourceMappingURL=ox-help-home.js.map

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

@@ -0,0 +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/mwc-icon-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport Headroom from '@operato/headroom'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-help-home')\nclass HelpHome extends connect(store)(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\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: white;\n      }\n      #navigation mwc-icon-button {\n        padding: var(--help-navigation-icon-padding);\n        border-right: var(--help-navigation-icon-border);\n        cursor: pointer;\n        color: var(--help-icon-color);\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        --mdc-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        <mwc-icon-button icon=\"home\" @click=${() => navigate('help')} ?disabled=${\n      this.topic == 'index'\n    }></mwc-icon-button>\n        <mwc-icon-button icon=\"keyboard_arrow_left\"  @click=${() => window.history.back()}></mwc-icon-button icon=\"\">\n        <mwc-icon-button icon=\"keyboard_arrow_right\"  @click=${() =>\n          window.history.forward()}></mwc-icon-button icon=\"\">\n      </div>      \n\n      ${\n        this.showGotoTop\n          ? html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `\n          : html``\n      }\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"]}

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

@@ -0,0 +1,2 @@
+import '@material/mwc-icon-button';
+import '@operato/markdown/ox-markdown.js';

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

@@ -0,0 +1,214 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon-button';
+import '@operato/markdown/ox-markdown.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import Headroom from '@operato/headroom';
+import { closeOverlay } from '@operato/layout';
+import { navigate, store } from '@operato/shell';
+import { HeadroomStyles, ScrollbarStyles } from '@operato/styles';
+let HelpPanel = class HelpPanel extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.showGotoTop = false;
+        this.historyIndex = 0;
+        this.history = [];
+    }
+    render() {
+        return html `
+      <div id="navigation">
+        <mwc-icon-button
+          icon="home"
+          @click=${() => this.goHome()}
+          ?disabled=${this.history[0] === this.history[this.historyIndex]}
+        ></mwc-icon-button>
+        <mwc-icon-button
+          icon="keyboard_arrow_left"
+          @click=${() => this.historyBack()}
+          ?disabled=${this.historyIndex < 1}
+        ></mwc-icon-button>
+        <mwc-icon-button
+          icon="keyboard_arrow_right"
+          @click=${() => this.historyForward()}
+          ?disabled=${this.historyIndex >= this.history.length - 1}
+        ></mwc-icon-button>
+        <mwc-icon-button icon="open_in_new" @click=${() => navigate(`help?topic=${this.topic}`)}></mwc-icon-button>
+        <mwc-icon-button icon="close" id="close" @click=${() => closeOverlay('help')}></mwc-icon-button>
+      </div>
+
+      ${!this.showGotoTop
+            ? html ``
+            : html ` <mwc-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
+      <ox-markdown id="content" .src=${this.topic && `/helps/${this.topic}.md`}></ox-markdown>
+    `;
+    }
+    async firstUpdated() {
+        this.setupRouter();
+        this.content.addEventListener('scroll', (e) => {
+            var _a;
+            this.showGotoTop = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.scrollTop) !== 0;
+        });
+        await this.requestUpdate();
+        var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'));
+        this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px';
+        var headroom = new Headroom(this.navigation, {
+            scroller: this.content
+        });
+        headroom.init();
+    }
+    async updated(changes) {
+        if (changes.has('topic')) {
+            if (!this.history) {
+                this.history = [this.topic];
+                this.historyIndex = 0;
+            }
+        }
+        if (changes.has('historyIndex')) {
+            this.topic = this.history[this.historyIndex];
+            this.content.scrollTop = 0;
+        }
+    }
+    setupRouter() {
+        this.addEventListener('click', e => {
+            var _a;
+            if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {
+                return;
+            }
+            const anchor = e.composedPath().filter(n => n.tagName === 'A')[0];
+            if (!anchor || anchor.target || anchor.hasAttribute('download') || anchor.getAttribute('rel') === 'external') {
+                return;
+            }
+            const href = anchor.href;
+            const newUrl = new URL(href);
+            if (!href || href.indexOf('mailto:') !== -1 || newUrl.origin !== location.origin) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const pathname = newUrl.pathname;
+            const topic = (_a = newUrl.searchParams) === null || _a === void 0 ? void 0 : _a.get('topic');
+            if (pathname === '/help' && topic) {
+                this.history = [...this.history.slice(0, this.historyIndex + 1), topic];
+                this.historyIndex++;
+                this.topic = topic;
+            }
+            else {
+                navigate(href);
+            }
+            return;
+        });
+    }
+    gotoTop(e) {
+        this.content.scrollTop = 0;
+        e.stopPropagation();
+    }
+    goHome() {
+        var _a;
+        if (!((_a = this.history) === null || _a === void 0 ? void 0 : _a[0]) || this.history[0] == this.topic) {
+            return;
+        }
+        this.history.push(this.history[0]);
+        this.historyIndex = this.history.length - 1;
+    }
+    historyBack() {
+        this.historyIndex > 0 && this.historyIndex--;
+    }
+    historyForward() {
+        this.history && this.historyIndex < this.history.length - 1 && this.historyIndex++;
+    }
+};
+HelpPanel.styles = [
+    ScrollbarStyles,
+    HeadroomStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--help-panel-background-color);
+
+        position: relative;
+        width: var(--help-panel-width);
+        max-height: 90%;
+        border-radius: var(--help-panel-border-raidus);
+        border: var(--help-panel-border);
+        box-shadow: var(--help-panel-box-shadow);
+        color: var(--help-panel-color);
+        margin: 4px;
+
+        overflow: hidden;
+      }
+
+      :host(:focus) {
+        outline: none;
+      }
+
+      #navigation {
+        display: flex;
+        position: absolute;
+        width: 100%;
+        padding: var(--help-navigation-padding);
+        border-bottom: var(--help-navigation-bottom);
+        background-color: white;
+      }
+      #navigation mwc-icon-button {
+        border-right: var(--help-navigation-icon-border);
+        cursor: pointer;
+        color: var(--help-icon-color);
+      }
+
+      #close {
+        margin-left: auto;
+        border-right: 0;
+      }
+
+      #content {
+        flex: 1;
+        overflow: auto;
+        padding: var(--help-panel-content-padding);
+        margin: var(--help-panel-margin);
+      }
+
+      #upward {
+        --mdc-icon-size: 26px;
+        position: absolute;
+        bottom: var(--data-list-fab-position-vertical);
+        right: var(--data-list-fab-position-horizontal);
+        background-color: rgba(255, 255, 255, 0.7);
+        border-radius: 20px;
+        color: var(--data-list-fab-color);
+        box-shadow: var(--data-list-fab-shadow);
+        padding: 7px;
+      }
+
+      @media screen and (max-width: 480px) {
+        :host {
+          height: 100%;
+          max-height: 100%;
+          margin: 0;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], HelpPanel.prototype, "topic", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelpPanel.prototype, "showGotoTop", void 0);
+__decorate([
+    state()
+], HelpPanel.prototype, "historyIndex", void 0);
+__decorate([
+    state()
+], HelpPanel.prototype, "history", void 0);
+__decorate([
+    query('#content')
+], HelpPanel.prototype, "content", void 0);
+__decorate([
+    query('#navigation')
+], HelpPanel.prototype, "navigation", void 0);
+HelpPanel = __decorate([
+    customElement('ox-help-panel')
+], HelpPanel);
+//# sourceMappingURL=ox-help-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-help-panel.js","sourceRoot":"","sources":["../../../src/viewparts/ox-help-panel.ts"],"names":[],"mappings":";AAAA,OAAO,2BAA2B,CAAA;AAClC,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjE,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAAlD;;QA2E+B,gBAAW,GAAY,KAAK,CAAA;QAEhD,iBAAY,GAAW,CAAC,CAAA;QACxB,YAAO,GAAa,EAAE,CAAA;IAyHjC,CAAC;IApHC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;mBAII,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;sBAChB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;;;;mBAItD,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;sBACrB,IAAI,CAAC,YAAY,GAAG,CAAC;;;;mBAIxB,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;sBACxB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;;qDAEb,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,IAAI,CAAC,KAAK,EAAE,CAAC;0DACrC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC;;;QAG5E,CAAC,IAAI,CAAC,WAAW;YACjB,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA,iCAAiC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B;uCAChE,IAAI,CAAC,KAAK,IAAI,UAAU,IAAI,CAAC,KAAK,KAAK;KACzE,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,WAAW,EAAE,CAAA;QAElB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;;YACnD,IAAI,CAAC,WAAW,GAAG,CAAA,MAAC,CAAC,CAAC,MAAsB,0CAAE,SAAS,MAAK,CAAC,CAAA;QAC/D,CAAC,CAAC,CAAA;QAEF,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;QAE1B,IAAI,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAA;QACvG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAA;QAEtF,IAAI,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE;YAC3C,QAAQ,EAAE,IAAI,CAAC,OAAO;SACvB,CAAC,CAAA;QACF,QAAQ,CAAC,IAAI,EAAE,CAAA;IACjB,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAA6B;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;gBACjB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAC3B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAA;aACtB;SACF;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;YAC5C,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAA;SAC3B;IACH,CAAC;IAED,WAAW;QACT,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;;YACjC,IAAI,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,EAAE;gBAChF,OAAM;aACP;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAE,CAAiB,CAAC,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAsB,CAAA;YACvG,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,UAAU,EAAE;gBAC5G,OAAM;aACP;YAED,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;YACxB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAA;YAC5B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM,EAAE;gBAChF,OAAM;aACP;YAED,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAA;YAChC,MAAM,KAAK,GAAG,MAAA,MAAM,CAAC,YAAY,0CAAE,GAAG,CAAC,OAAO,CAAC,CAAA;YAC/C,IAAI,QAAQ,KAAK,OAAO,IAAI,KAAK,EAAE;gBACjC,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;gBACvE,IAAI,CAAC,YAAY,EAAE,CAAA;gBACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;aACnB;iBAAM;gBACL,QAAQ,CAAC,IAAI,CAAC,CAAA;aACf;YAED,OAAM;QACR,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAA;QAE1B,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;IAED,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAG,CAAC,CAAC,CAAA,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE;YACvD,OAAM;SACP;QACD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;IAC7C,CAAC;IAED,WAAW;QACT,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAA;IAC9C,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAA;IACpF,CAAC;CACF,CAAA;AAtMQ,gBAAM,GAAG;IACd,eAAe;IACf,cAAc;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmEF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAe;AACb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAA6B;AAEhD;IAAR,KAAK,EAAE;+CAAyB;AACxB;IAAR,KAAK,EAAE;0CAAuB;AAEZ;IAAlB,KAAK,CAAC,UAAU,CAAC;0CAAsB;AAClB;IAArB,KAAK,CAAC,aAAa,CAAC;6CAAyB;AAjF1C,SAAS;IADd,aAAa,CAAC,eAAe,CAAC;GACzB,SAAS,CAuMd","sourcesContent":["import '@material/mwc-icon-button'\nimport '@operato/markdown/ox-markdown.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport Headroom from '@operato/headroom'\nimport { closeOverlay } from '@operato/layout'\nimport { navigate, store } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-help-panel')\nclass HelpPanel extends connect(store)(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\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: white;\n      }\n      #navigation mwc-icon-button {\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        --mdc-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      @media screen and (max-width: 480px) {\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 = 0\n  @state() history: string[] = []\n\n  @query('#content') content!: HTMLElement\n  @query('#navigation') navigation!: HTMLElement\n\n  render() {\n    return html`\n      <div id=\"navigation\">\n        <mwc-icon-button\n          icon=\"home\"\n          @click=${() => this.goHome()}\n          ?disabled=${this.history[0] === this.history[this.historyIndex]}\n        ></mwc-icon-button>\n        <mwc-icon-button\n          icon=\"keyboard_arrow_left\"\n          @click=${() => this.historyBack()}\n          ?disabled=${this.historyIndex < 1}\n        ></mwc-icon-button>\n        <mwc-icon-button\n          icon=\"keyboard_arrow_right\"\n          @click=${() => this.historyForward()}\n          ?disabled=${this.historyIndex >= this.history.length - 1}\n        ></mwc-icon-button>\n        <mwc-icon-button icon=\"open_in_new\" @click=${() => navigate(`help?topic=${this.topic}`)}></mwc-icon-button>\n        <mwc-icon-button icon=\"close\" id=\"close\" @click=${() => closeOverlay('help')}></mwc-icon-button>\n      </div>\n\n      ${!this.showGotoTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n      <ox-markdown id=\"content\" .src=${this.topic && `/helps/${this.topic}.md`}></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.history) {\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)\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 === '/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"]}