@things-factory/lite-menu 8.0.0-beta.9 → 8.0.0

package/client/actions/lite-menu.ts

@@ -0,0 +1,146 @@
+import '@material/web/icon/icon.js'
+import '@operato/menu/ox-menu-part.js'
+
+import gql from 'graphql-tag'
+import { html } from 'lit'
+
+import { store, InheritedValueType, clientSettingStore } from '@operato/shell'
+import { client } from '@operato/graphql'
+import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
+import { isMobileDevice } from '@operato/utils'
+
+import { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base/client'
+
+export const UPDATE_ADDON_MENUS = 'UPDATE_ADDON_MENUS'
+export const UPDATE_MENU_TEMPLATE = 'UPDATE_MENU_TEMPLATE'
+
+var HAMBURGER
+
+export async function setupMenuPart(options) {
+  var {
+    hovering = isMobileDevice() ? true : false,
+    slotTemplate,
+    portraitSlotTemplate,
+    landscapeSlotTemplate,
+    position = VIEWPART_POSITION.NAVBAR
+  } = options || {}
+
+  const { hovering: hoveringSetting } = (await clientSettingStore.get('lite-menu'))?.value || {}
+  if (hoveringSetting !== undefined) {
+    hovering = hoveringSetting
+  }
+
+  const orientation = position == VIEWPART_POSITION.HEADERBAR ? 'landscape' : 'portrait'
+  const orientatedSlotTemplate =
+    (orientation == 'landscape' ? landscapeSlotTemplate : portraitSlotTemplate) || slotTemplate || html``
+
+  appendViewpart({
+    name: 'ox-menu-part',
+    viewpart: {
+      show: !hovering,
+      resizable: true,
+      hovering: isMobileDevice() ? true : hovering,
+      template: html` <ox-menu-part .orientation=${orientation}>${orientatedSlotTemplate}</ox-menu-part> `
+    },
+    position
+  })
+
+  // hovering이 true거나 모바일 일때는 계속 햄버거 버튼 표시
+  if ((hovering || isMobileDevice()) && orientation == 'portrait') {
+    if (!HAMBURGER) {
+      HAMBURGER = {
+        name: 'hamburger',
+        template: html`
+          <md-icon
+            @click=${e =>
+              toggleOverlay('ox-menu-part', {
+                backdrop: true
+              })}
+            >view_headline</md-icon
+          >
+        `,
+        position: TOOL_POSITION.FRONT_END
+      }
+
+      store.dispatch({
+        /* incase of mobile : add hamburger tool */
+        type: APPEND_APP_TOOL,
+        tool: HAMBURGER
+      })
+    }
+  } else {
+    if (HAMBURGER) {
+      store.dispatch({
+        type: REMOVE_APP_TOOL,
+        name: 'hamburger'
+      })
+
+      HAMBURGER = null
+    }
+  }
+}
+
+export async function updateMenuTemplate(template) {
+  await fetchAddonMenus()
+
+  store.dispatch({
+    type: UPDATE_MENU_TEMPLATE,
+    template
+  })
+}
+
+export async function fetchAddonMenus() {
+  var applicationName = (document.querySelector('meta[name="application-name"]') as HTMLMetaElement)?.content
+
+  var liteMenus = (
+    await client.query({
+      query: gql`
+        query ($filters: [Filter!], $inherited: InheritedValueType) {
+          liteMenus: myLiteMenus(filters: $filters, inherited: $inherited) {
+            items {
+              id
+              name
+              label
+              description
+              appName
+              parent
+              rank
+              active
+              type
+              value
+              icon
+              help
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters: [
+          {
+            name: 'active',
+            operator: 'eq',
+            value: true
+          },
+          {
+            name: 'appName',
+            operator: 'in',
+            value: ['', applicationName]
+          }
+        ],
+        sortings: [
+          {
+            name: 'rank',
+            desc: false
+          }
+        ],
+        inherited: InheritedValueType.Include
+      }
+    })
+  ).data.liteMenus.items
+
+  store.dispatch({
+    type: UPDATE_ADDON_MENUS,
+    addon: liteMenus.filter(menu => !menu.appName || menu.appName === applicationName)
+  })
+}

package/client/bootstrap.ts

@@ -0,0 +1,16 @@
+import '@material/web/icon/icon.js'
+import '@operato/i18n/ox-i18n.js'
+import './route'
+
+import { store } from '@operato/shell'
+
+import { registerEditor as registerGristEditor } from '@operato/data-grist'
+import { OxGristEditorI18nLabel } from '@operato/grist-editor/ox-grist-editor-i18n-label.js'
+
+import liteMenu from './reducers/lite-menu'
+
+export default function bootstrap() {
+  registerGristEditor('i18n-label', OxGristEditorI18nLabel)
+
+  store.addReducers({ liteMenu })
+}

package/client/index.ts

@@ -0,0 +1,2 @@
+export * from './actions/lite-menu'
+export * from './lite-menu-setting-let'

package/client/lite-menu-setting-let.ts

@@ -0,0 +1,86 @@
+import '@operato/i18n/ox-i18n.js'
+import '@material/web/checkbox/checkbox.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, query, property, state } from 'lit/decorators.js'
+
+import { clientSettingStore } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
+
+import { setupMenuPart } from './actions/lite-menu'
+
+@customElement('lite-menu-setting-let')
+export class LiteMenuSettingLet extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      label {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+
+        font: var(--label-font);
+        color: var(--md-sys-color-on-primary-container);
+        text-transform: var(--label-text-transform);
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) hovering?: boolean
+
+  render() {
+    const checked = this.hovering === true
+    const indeterminate = this.hovering === undefined
+
+    return html`
+      <setting-let>
+        <ox-i18n slot="title" msgid="title.lite-menu-setting"></ox-i18n>
+
+        <div slot="content">
+          <label>
+            <md-checkbox
+              id="hovering"
+              @change=${e => this.onChange(e)}
+              ?checked=${checked}
+              ?indeterminate=${indeterminate}
+            ></md-checkbox>
+            hovering
+          </label>
+        </div>
+      </setting-let>
+    `
+  }
+
+  async firstUpdated() {
+    this.hovering = ((await clientSettingStore.get('lite-menu'))?.value || {}).hovering
+  }
+
+  async onChange(e: Event) {
+    if (this.hovering === true) {
+      this.hovering = false
+    } else if (this.hovering === false) {
+      this.hovering = undefined
+    } else {
+      this.hovering = true
+    }
+
+    const { hovering: valueFromStore } = (await clientSettingStore.get('lite-menu'))?.value || {}
+    if (this.hovering === valueFromStore) {
+      return
+    }
+
+    try {
+      await clientSettingStore.put({
+        key: 'lite-menu',
+        value: {
+          hovering: this.hovering
+        }
+      })
+    } catch (e) {
+      console.error(e)
+    }
+
+    setupMenuPart({
+      hovering: this.hovering
+    })
+  }
+}