@operato/help 0.3.22

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

@@ -0,0 +1,213 @@
+import '@material/mwc-icon-button'
+import '@operato/markdown/ox-markdown.js'
+
+import { css, html, LitElement, PropertyValues } 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'
+
+@customElement('ox-help-panel')
+class HelpPanel extends connect(store)(LitElement) {
+  static 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;
+        }
+      }
+    `
+  ]
+
+  @property({ type: String }) topic!: string
+  @property({ type: Boolean }) showGotoTop: boolean = false
+
+  @state() historyIndex: number = 0
+  @state() history: string[] = []
+
+  @query('#content') content!: HTMLElement
+  @query('#navigation') navigation!: HTMLElement
+
+  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: Event) => 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: Event) => {
+      this.showGotoTop = (e.target as HTMLElement)?.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: PropertyValues<this>) {
+    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 => {
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {
+        return
+      }
+
+      const anchor = e.composedPath().filter(n => (n as HTMLElement).tagName === 'A')[0] as HTMLAnchorElement
+      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 = newUrl.searchParams?.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: Event) {
+    this.content.scrollTop = 0
+
+    e.stopPropagation()
+  }
+
+  goHome() {
+    if (!this.history?.[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++
+  }
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});