@things-factory/help 4.0.38 → 4.0.42

package/client/bootstrap.js

@@ -1,7 +1,8 @@
+import '@operato/help/ox-help-panel.js'
+
 import { html } from 'lit-html'
-import { appendViewpart, VIEWPART_POSITION } from '@things-factory/layout-base'
 
-import './viewparts/help-panel'
+import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'
 
 export default function bootstrap() {
   appendViewpart({
@@ -9,7 +10,7 @@ export default function bootstrap() {
     viewpart: {
       show: false,
       hovering: 'edge',
-      template: html` <help-panel></help-panel> `
+      template: html` <ox-help-panel></ox-help-panel> `
     },
     position: VIEWPART_POSITION.ASIDEBAR
   })

package/client/index.js

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

package/client/route.js

@@ -1,7 +1,7 @@
 export default function route(page) {
   switch (page) {
     case 'help':
-      import('./pages/help-home')
+      import('@operato/help/ox-help-home.js')
       return page
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/help",
-  "version": "4.0.38",
+  "version": "4.0.42",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -26,10 +26,9 @@
   "dependencies": {
     "@material/mwc-icon": "^0.25.3",
     "@material/mwc-icon-button": "^0.25.3",
-    "@operato/headroom": "^0.3.18",
-    "@operato/markdown": "^0.3.18",
-    "@things-factory/grist-ui": "^4.0.38",
-    "@things-factory/layout-base": "^4.0.38"
+    "@operato/help": "^0.3.24",
+    "@operato/layout": "^0.3.24",
+    "@things-factory/shell": "^4.0.42"
   },
-  "gitHead": "c2b2638e6efec319d4024cedc8da513d560c126e"
+  "gitHead": "794709ebadf4ae0f89a107a86a41a381ce26b465"
 }

package/things-factory.config.js

@@ -1,11 +1,11 @@
-import route from './client/route'
 import bootstrap from './client/bootstrap'
+import route from './client/route'
 
 export default {
   route,
   routes: [
     {
-      tagname: 'help-home',
+      tagname: 'ox-help-home',
       page: 'help'
     }
   ],

package/client/components/help-icon.js

@@ -1,39 +0,0 @@
-import { LitElement, html, css } from 'lit-element'
-import { openHelp } from '@things-factory/help'
-
-import '@material/mwc-icon'
-
-export class HelpIcon extends LitElement {
-  static get styles() {
-    return css`
-      mwc-icon {
-        position: relative;
-        top: 4px;
-        cursor: help;
-        opacity: var(--help-icon-opacity);
-        color: var(--help-icon-color);
-        font-size: var(--help-icon-size);
-        line-height: 0;
-      }
-
-      mwc-icon:hover {
-        opacity: var(--help-icon-hover-opacity);
-        color: var(--help-icon-hover-color);
-      }
-    `
-  }
-
-  static get properties() {
-    return {
-      topic: String
-    }
-  }
-
-  render() {
-    const topic = this.topic
-
-    return html`${topic ? html`<mwc-icon @click=${e => openHelp(topic)}>help</mwc-icon>` : html``}`
-  }
-}
-
-customElements.define('help-icon', HelpIcon)

package/client/components/inline-help.js

@@ -1,34 +0,0 @@
-import { html, css, LitElement } from 'lit-element'
-import { openHelp } from '../controller/help'
-
-export class InlineHelp extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        align-items: center;
-      }
-    `
-  }
-
-  static get properties() {
-    return {
-      topic: String,
-      type: String
-    }
-  }
-
-  render() {
-    return html` <slot></slot> `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.renderRoot.addEventListener('click', e => {
-      openHelp(this.topic)
-    })
-  }
-}
-
-customElements.define('inline-help', InlineHelp)

package/client/components/title-with-help.js

@@ -1,41 +0,0 @@
-import { LitElement, html, css } from 'lit-element'
-import { openHelp } from '@things-factory/help'
-import { i18next, localize } from '@things-factory/i18n-base'
-
-import '@material/mwc-icon'
-
-export class TitleWithHelp extends localize(i18next)(LitElement) {
-  static get styles() {
-    return css`
-      mwc-icon {
-        position: relative;
-        top: 4px;
-        cursor: help;
-        opacity: var(--help-icon-opacity);
-        color: var(--help-icon-color);
-        font-size: var(--help-icon-size);
-        line-height: 0;
-      }
-      mwc-icon:hover {
-        opacity: var(--help-icon-hover-opacity);
-        color: var(--help-icon-hover-color);
-      }
-    `
-  }
-
-  static get properties() {
-    return {
-      msgid: String,
-      topic: String
-    }
-  }
-
-  render() {
-    const title = i18next.t(this.msgid)
-    const topic = this.topic
-
-    return html` ${title} ${topic ? html`<mwc-icon @click=${e => openHelp(topic)}>help</mwc-icon>` : html``} `
-  }
-}
-
-customElements.define('title-with-help', TitleWithHelp)

package/client/controller/help.js

@@ -1,13 +0,0 @@
-import { openOverlay, closeOverlay } from '@things-factory/layout-base'
-
-export function openHelp(topic) {
-  openOverlay('help', {
-    templateProperties: {
-      topic
-    }
-  })
-}
-
-export function closeHelp() {
-  closeOverlay('help')
-}

package/client/grist/help-decorated-renderer.js

@@ -1,12 +0,0 @@
-import { html } from 'lit-html'
-import '../components/help-icon'
-
-const decoratorTemplate = topic => html`<help-icon style="flex: 0;" .topic=${topic}>help</help-icon>`
-
-export const HelpDecoratedRenderer = (value, column, record, rowIndex, field) => {
-  const { help } = column?.record
-  const text = value === undefined ? '' : value
-
-  const topic = help && help(value, column, record, rowIndex, field)
-  return topic ? html`${text}&nbsp;${decoratorTemplate(topic)}` : text
-}

package/client/help-style.js

@@ -1,122 +0,0 @@
-import { css } from 'lit-element'
-
-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;
-  }
-`

package/client/pages/help-home.js

@@ -1,129 +0,0 @@
-import '@material/mwc-icon-button'
-
-import { HeadroomStyles, ScrollbarStyles } from '@things-factory/styles'
-import { PageView, navigate, store } from '@things-factory/shell'
-import { css, html } from 'lit-element'
-import { i18next, localize } from '@things-factory/i18n-base'
-
-import Headroom from '@operato/headroom'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-class HelpHome extends connect(store)(localize(i18next)(PageView)) {
-  static get styles() {
-    return [
-      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;
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      topic: String,
-      showGotoTop: Boolean
-    }
-  }
-
-  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=${e => navigate('help')} ?disabled=${
-      this.topic == 'index'
-    }></mwc-icon-button>
-        <mwc-icon-button icon="keyboard_arrow_left"  @click=${e => window.history.back()}></mwc-icon-button icon="">
-        <mwc-icon-button icon="keyboard_arrow_right"  @click=${e => 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() {
-    var content = this.renderRoot.querySelector('#content')
-    content.addEventListener('scroll', e => {
-      this.showGotoTop = e.target.scrollTop !== 0
-    })
-
-    var navigation = this.renderRoot.querySelector('#navigation')
-
-    await this.requestUpdate()
-
-    var originPaddingTop = parseFloat(getComputedStyle(content, null).getPropertyValue('padding-top'))
-    content.style.paddingTop = navigation.clientHeight + originPaddingTop + 'px'
-
-    var headroom = new Headroom(navigation, {
-      scroller: content
-    })
-    headroom.init()
-  }
-
-  async pageUpdated(changes, lifecycle) {
-    if (this.active) {
-      this.topic = lifecycle.params['topic'] || 'index'
-      this.renderRoot.querySelector('#content').scrollTop = 0
-    }
-  }
-
-  gotoTop(e) {
-    this.renderRoot.querySelector('#content').scrollTop = 0
-
-    e.stopPropagation()
-  }
-}
-
-customElements.define('help-home', HelpHome)

package/client/viewparts/help-panel.js

@@ -1,216 +0,0 @@
-import '@material/mwc-icon-button'
-import '@operato/markdown'
-
-import { HeadroomStyles, ScrollbarStyles } from '@things-factory/styles'
-import { LitElement, css, html } from 'lit-element'
-import { navigate, store } from '@things-factory/shell'
-
-import Headroom from '@operato/headroom'
-import { closeOverlay } from '@things-factory/layout-base'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-class HelpPanel extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      topic: String,
-      historyIndex: Number,
-      showGotoTop: Boolean
-    }
-  }
-
-  static get styles() {
-    return [
-      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;
-          }
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <div id="navigation">
-        <mwc-icon-button
-          icon="home"
-          @click=${e => this.goHome()}
-          ?disabled=${!this.history || this.history[0] === this.history[this.historyIndex]}
-        ></mwc-icon-button>
-        <mwc-icon-button
-          icon="keyboard_arrow_left"
-          @click=${e => this.historyBack()}
-          ?disabled=${!this.history || this.historyIndex < 1}
-        ></mwc-icon-button>
-        <mwc-icon-button
-          icon="keyboard_arrow_right"
-          @click=${e => this.historyForward()}
-          ?disabled=${!this.history || this.historyIndex >= this.history.length - 1}
-        ></mwc-icon-button>
-        <mwc-icon-button icon="open_in_new" @click=${e => navigate(`help?topic=${this.topic}`)}></mwc-icon-button>
-        <mwc-icon-button icon="close" id="close" @click=${e => 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()
-
-    var content = this.renderRoot.querySelector('#content')
-    content.addEventListener('scroll', e => {
-      this.showGotoTop = e.target.scrollTop !== 0
-    })
-
-    var navigation = this.renderRoot.querySelector('#navigation')
-
-    await this.requestUpdate()
-
-    var originPaddingTop = parseFloat(getComputedStyle(content, null).getPropertyValue('padding-top'))
-    content.style.paddingTop = navigation.clientHeight + originPaddingTop + 'px'
-
-    var headroom = new Headroom(navigation, {
-      scroller: content
-    })
-    headroom.init()
-  }
-
-  async updated(changed) {
-    if (changed.has('topic')) {
-      if (!this.history) {
-        this.history = [this.topic]
-        this.historyIndex = 0
-      }
-    }
-
-    if (changed.has('historyIndex')) {
-      this.topic = this.history[this.historyIndex]
-      this.renderRoot.querySelector('#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.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 = 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) {
-    this.renderRoot.querySelector('#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++
-  }
-}
-
-customElements.define('help-panel', HelpPanel)