@operato/menu 2.0.0-alpha.55

package/src/menu-portrait-styles.ts

@@ -0,0 +1,147 @@
+import { css } from 'lit'
+
+export const MenuPortraitStyles = css`
+  :host {
+    display: flex;
+    overflow-y: auto;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  :host > ul {
+    margin-block-end: 1.5em;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  [group-label] {
+    padding: 25px 0 var(--padding-narrow) var(--padding-wide);
+    border-bottom: var(--border-dark-color);
+    font: bold 12px var(--theme-font);
+    color: rgba(var(--primary-color-rgb), 0.9);
+    text-transform: uppercase;
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);
+    text-decoration: none;
+    font: normal 14px var(--theme-font);
+    color: var(--secondary-color);
+    text-transform: capitalize;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  a:hover {
+    color: var(--primary-color);
+    font-weight: bold;
+  }
+
+  a * {
+    vertical-align: middle;
+  }
+
+  a mwc-icon {
+    margin-right: var(--margin-narrow);
+    font-size: 15px;
+    color: rgba(var(--secondary-color-rgb), 0.7);
+  }
+
+  a [submenu-button] {
+    float: left;
+    font-size: 15px;
+    max-height: 20px;
+  }
+
+  a [submenu-button]::before {
+    content: 'add_box';
+  }
+
+  li[active] > a [submenu-button]::before {
+    content: 'indeterminate_check_box';
+  }
+
+  li[active] > a {
+    border-left: 3px solid var(--primary-color);
+    font-weight: bold;
+    color: var(--primary-color);
+  }
+
+  li li a {
+    padding: 7px 0 7px 35px;
+    font: normal 13px var(--theme-font);
+    color: var(--secondary-color);
+  }
+
+  li li[active] a {
+    background-color: rgba(var(--primary-color-rgb), 0.15);
+    font: bold 13px var(--theme-font);
+    color: var(--primary-color);
+  }
+
+  li > ul {
+    overflow-y: hidden;
+    max-height: 0;
+    background-color: #f6f6f6;
+
+    transition-property: all;
+    transition-duration: 0.7s;
+  }
+
+  li[active] > ul {
+    max-height: 500px;
+  }
+
+  li[active] > ul[settled] {
+    overflow-y: auto;
+  }
+
+  li li a::before {
+    margin-right: var(--margin-narrow);
+  }
+
+  a [badge] {
+    margin-left: auto;
+    background-color: var(--primary-background-color);
+    color: white;
+    border-radius: 999em;
+    padding: 0px 6px;
+  }
+
+  @media only screen and (max-width: 460px) {
+    :host {
+      min-width: 100vw;
+    }
+
+    a {
+      padding: var(--padding-wide);
+      font: normal 15px var(--theme-font);
+    }
+
+    li[active] ul {
+      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+    }
+
+    li li a {
+      display: block;
+      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font: normal 14px var(--theme-font);
+    }
+
+    li li[active] a {
+      font: bold 14px var(--theme-font);
+    }
+  }
+`

package/src/ox-menu-landscape.ts

@@ -0,0 +1,105 @@
+import '@material/mwc-icon'
+
+import { html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers'
+
+import { navigate, store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { Menu } from './types'
+import { MenuLandscapeStyles } from './menu-landscape-styles'
+
+@customElement('ox-menu-landscape')
+export class OxMenuLandscape extends connect(store)(LitElement) {
+  static styles = [ScrollbarStyles, MenuLandscapeStyles]
+
+  @property({ type: Array }) menus?: Menu[]
+  @property({ type: Object }) activeTopLevel?: Menu
+  @property({ type: Object }) activeMenu!: Menu
+  @property({ type: String }) path?: string
+
+  render() {
+    const { menus = [], activeTopLevel, activeMenu } = this
+
+    return html`
+      <div id="wrap" @mousewheel=${this.onWheelEvent.bind(this)}>
+        <ul>
+          ${menus.map(menu =>
+            menu.type == 'group'
+              ? html``
+              : html`
+                  <li ?active=${menu === activeTopLevel}>
+                    <a href=${menu.path || '#'}>
+                      ${menu.icon ? html`<mwc-icon>${menu.icon}</mwc-icon>` : html``} ${menu.name}
+                    </a>
+
+                    <ul submenus>
+                      ${menu.menus?.map(
+                        menu => html`
+                          <li ?active=${menu === activeMenu}>
+                            <a href=${menu.path || '#'}> ${menu.name} </a>
+                          </li>
+                        `
+                      )}
+                    </ul>
+
+                    <div description>
+                      ${menu.icon ? html`<mwc-icon>${menu.icon}</mwc-icon>` : html``} ${menu.description || ''}
+                    </div>
+                  </li>
+                `
+          )}
+        </ul>
+      </div>
+    `
+  }
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('click', (e: Event) => {
+      //@ts-ignore
+      if (e.target.submenu) {
+        /* protect to act move to href. */
+        e.stopPropagation()
+        e.preventDefault()
+
+        //@ts-ignore
+        let menu = e.target.submenu
+
+        this.dispatchEvent(
+          new CustomEvent('active-toplevel', {
+            bubbles: true,
+            detail: this.activeTopLevel === menu ? undefined : menu
+          })
+        )
+
+        return
+      }
+
+      /* to respond even if current acting menu is selected */
+      let href = (e.target as HTMLAnchorElement).href
+      href && location.href === href && navigate(href + '#force', true)
+    })
+
+    /* to hide scrollbar during transition */
+    this.renderRoot.addEventListener('transitionstart', e => {
+      ;(e.target as HTMLElement).removeAttribute('settled')
+    })
+    this.renderRoot.addEventListener('transitionend', e => {
+      ;(e.target as HTMLElement).setAttribute('settled', '')
+    })
+  }
+
+  onWheelEvent(e: WheelEvent) {
+    const { target, deltaY, detail } = e
+
+    if (!(target instanceof HTMLElement)) {
+      return
+    }
+
+    const delta = deltaY || -detail
+    target.scrollLeft -= (delta / Math.abs(delta)) * 10
+
+    e.preventDefault()
+  }
+}

package/src/ox-menu-part.ts

@@ -0,0 +1,131 @@
+import '@material/mwc-icon'
+import './ox-menu-portrait'
+import './ox-menu-landscape'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers'
+
+import { store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { Menu } from './types'
+
+function isActiveMenu(menu: Menu, path: string) {
+  return (
+    menu.path?.split('?')[0] === path ||
+    (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))
+  )
+}
+
+@customElement('ox-menu-part')
+export class OxMenuPart extends connect(store)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        overflow-y: auto;
+        flex-direction: column;
+        height: 100%;
+        min-width: 200px;
+        background-color: var(--theme-white-color);
+      }
+
+      :host([landscape]) {
+        overflow-x: auto;
+        flex-direction: row;
+        width: 100%;
+        min-height: 20px;
+      }
+
+      ox-menu-portrait,
+      ox-menu-landscape {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: String }) page!: string
+  @property({ type: String }) resourceId?: string
+  @property({ type: Array }) menus?: Menu[]
+  @property({ type: String }) orientation?: 'landscape' | 'portrait'
+
+  @state() slotTemplate: any
+  @state() _activeTopLevel?: Menu
+  @state() _activeMenu?: Menu
+  @state() _path?: string
+
+  render() {
+    return html`
+      <slot name="head"></slot>
+      ${this.orientation !== 'landscape'
+        ? html`<ox-menu-portrait
+            .menus=${this.menus}
+            .activeTopLevel=${this._activeTopLevel}
+            .activeMenu=${this._activeMenu}
+            .path=${this._path}
+          ></ox-menu-portrait>`
+        : html`<ox-menu-landscape
+            .menus=${this.menus}
+            .activeTopLevel=${this._activeTopLevel}
+            .activeMenu=${this._activeMenu}
+            .path=${this._path}
+          ></ox-menu-landscape>`}
+      <slot name="tail"></slot>
+    `
+  }
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('active-toplevel', (e: Event) => {
+      e.stopPropagation()
+      e.preventDefault()
+
+      this._activeTopLevel = (e as CustomEvent).detail
+    })
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
+      this.findActivePage()
+    }
+
+    if (changes.has('orientation')) {
+      if (this.orientation == 'portrait') {
+        this.removeAttribute('landscape')
+      } else {
+        this.setAttribute('landscape', '')
+      }
+    }
+
+    if (changes.has('slotTemplate')) {
+      this.replaceChild(this.slotTemplate, this.renderRoot)
+    }
+  }
+
+  stateChanged(state: any): void {
+    this.page = state.route.page
+    this.resourceId = state.route.resourceId
+    this.menus = state.liteMenu.menus || []
+    this.slotTemplate = state.liteMenu.slotTemplate
+  }
+
+  private findActivePage() {
+    var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page
+    var menus = this.menus || []
+    var activeMenu
+
+    this._activeTopLevel = menus.find(menu => {
+      if (isActiveMenu(menu, path)) {
+        activeMenu = menu
+        return true
+      } else if (menu.menus) {
+        activeMenu = menu.menus.find(menu => isActiveMenu(menu, path))
+        return !!activeMenu
+      }
+    })
+
+    this._path = path
+    this._activeMenu = activeMenu || this._activeTopLevel
+  }
+}

package/src/ox-menu-portrait.ts

@@ -0,0 +1,87 @@
+import '@material/mwc-icon'
+
+import { html, LitElement, TemplateResult } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { navigate } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { Menu } from './types'
+import { MenuPortraitStyles } from './menu-portrait-styles'
+
+@customElement('ox-menu-portrait')
+export class OxMenuPortrait extends LitElement {
+  static styles = [ScrollbarStyles, MenuPortraitStyles]
+
+  @property({ type: Array }) menus?: Menu[]
+  @property({ type: Object }) activeTopLevel?: Menu
+  @property({ type: Object }) activeMenu?: Menu
+  @property({ type: String }) path!: string
+
+  renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu): TemplateResult {
+    return html`
+      <ul>
+        ${menus.map(menu => {
+          var { type, active, path, name, badge, icon, menus = [] } = menu
+          active = active && typeof active === 'function' ? active.call(menu, { path: this.path }) : false
+          badge = typeof badge === 'function' ? badge.call(menu) : badge ?? false
+
+          return type == 'group'
+            ? html`<li group-label>${name}</li>`
+            : html`
+                <li ?active=${activeTopLevel ? menu === activeTopLevel : active} .menu=${menu} menu>
+                  <a href=${path || '#'}>
+                    ${menus.length > 0 ? html` <mwc-icon submenu-button></mwc-icon> ` : html``}
+                    <mwc-icon>${icon}</mwc-icon>
+                    ${name} ${badge !== false ? html`<div badge>${badge}</div>` : html``}
+                  </a>
+                  ${menus && this.renderMenus(menus || [], activeMenu)}
+                </li>
+              `
+        })}
+      </ul>
+    `
+  }
+
+  render() {
+    const { menus, activeTopLevel, activeMenu } = this
+    return this.renderMenus(menus || [], activeTopLevel, activeMenu)
+  }
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('click', (e: Event) => {
+      const menuElement = (e.target as Element)!.closest('[menu]')
+
+      //@ts-ignore
+      if (menuElement?.menu) {
+        //@ts-ignore
+        let menu = menuElement.menu
+
+        if (!menu.path) {
+          /* protect to act move to href. */
+          e.stopPropagation()
+          e.preventDefault()
+        }
+
+        this.dispatchEvent(
+          new CustomEvent('active-toplevel', {
+            bubbles: true,
+            detail: this.activeTopLevel === menu ? undefined : menu
+          })
+        )
+      }
+
+      /* to respond even if current acting menu is selected */
+      let href = (e.target as HTMLAnchorElement)!.href
+      href && location.href === href && navigate(href + '#force', true)
+    })
+
+    /* to hide scrollbar during transition */
+    this.renderRoot.addEventListener('transitionstart', e => {
+      ;(e.target as Element).removeAttribute('settled')
+    })
+    this.renderRoot.addEventListener('transitionend', e => {
+      ;(e.target as Element).setAttribute('settled', '')
+    })
+  }
+}

package/src/ox-top-menu-bar.ts

@@ -0,0 +1,147 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement, PropertyValueMap, TemplateResult } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers'
+
+import { toggleOverlay } from '@operato/layout'
+import { store } from '@operato/shell'
+
+import { Menu } from './types'
+
+@customElement('ox-top-menu-bar')
+export class OxTopMenuBar extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: row;
+      }
+
+      span {
+        flex: 1;
+      }
+
+      ul {
+        display: flex;
+        align-items: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        display: inline-flex;
+        flex-direction: row nowrap;
+        float: left;
+        overflow: none;
+      }
+
+      a {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: var(--padding-default) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
+        text-decoration: none;
+        color: white;
+      }
+      a * {
+        vertical-align: middle;
+      }
+      a mwc-icon {
+        opacity: 0.5;
+        position: relative;
+        top: -2px;
+        font-size: 1em;
+      }
+
+      li[active] a {
+        font-weight: bold;
+      }
+      li[active] a mwc-icon {
+        opacity: 1;
+      }
+    `
+  ]
+
+  @property({ type: String }) page?: string
+  @property({ type: String }) resourceId?: string
+  @property({ type: Array }) menus?: Menu[]
+  @property({ type: Object }) slotTemplate!: Node
+
+  @state() private _activeTopLevel?: Menu
+
+  render() {
+    const { menus = [], _activeTopLevel } = this
+
+    return html`
+      <slot name="head"></slot>
+      <ul>
+        ${menus.map(menu =>
+          menu.type == 'group'
+            ? html``
+            : html`
+                <li ?active=${menu === _activeTopLevel}>
+                  <a
+                    href="#"
+                    @click=${(e: MouseEvent) => {
+                      e.preventDefault()
+                      toggleOverlay('ox-menu-part', {
+                        backdrop: true
+                      })
+                    }}
+                  >
+                    ${menu.name}
+                    <mwc-icon>expand_more</mwc-icon>
+                  </a>
+                </li>
+              `
+        )}
+      </ul>
+      <slot name="tail"></slot>
+    `
+  }
+
+  stateChanged(state: any): void {
+    this.page = state.route.page
+    this.resourceId = state.route.resourceId
+    this.menus = state.liteMenu.menus || []
+    this.slotTemplate = state.liteMenu.slotTemplate
+  }
+
+  // firstUpdated() {
+  //   this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
+  // }
+
+  updated(changes: PropertyValueMap<this>) {
+    if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
+      this._findActivePage()
+    }
+
+    if (changes.has('slotTemplate')) {
+      this.replaceChild(this.slotTemplate, this.renderRoot)
+    }
+  }
+
+  // onWheelEvent(e) {
+  //   var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
+  //   this.scrollLeft -= delta * 40
+  //   console.log('delta', this.scrollLeft, delta, e.wheelDelta || -e.detail)
+
+  //   e.preventDefault()
+  // }
+
+  _findActivePage() {
+    var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page
+    var menus = this.menus || []
+
+    this._activeTopLevel = menus.find(menu => {
+      if (menu.path?.split('?')[0] === path) {
+        return true
+      } else if (menu.menus) {
+        return !!menu.menus.find(menu => menu.path?.split('?')[0] === path)
+      }
+    })
+  }
+}

package/src/types.ts

@@ -0,0 +1,10 @@
+export type Menu = {
+  type?: 'group' | 'board'
+  name?: string
+  description?: string
+  path?: string
+  icon?: string
+  badge?: boolean | string | (() => boolean)
+  active?: boolean | ((menu?: Menu) => boolean)
+  menus?: Menu[]
+}