@operato/layout 7.1.27 → 7.1.32

package/src/actions/layout.ts

@@ -1,222 +0,0 @@
-import { TemplateResult } from 'lit'
-
-import { PopupHandle, PopupOptions, setOpenPopupImplementation } from '@operato/popup'
-import { store } from '@operato/shell'
-
-export type Viewpart = {
-  hovering?: 'center' | 'edge' | 'next'
-  show?: boolean
-  size?: string
-  title?: string
-  help?: string
-  level?: VIEWPART_LEVEL
-  closable?: boolean
-  search?: {
-    value?: string
-    handler?: (closure: any, value: string) => void
-    placeholder?: string
-  }
-  filter?: {
-    handler?: (closure: any) => void
-  }
-  backdrop?: boolean
-  temporary?: boolean /* auto remove */
-  resizable?: boolean
-  template?: TemplateResult
-  position?: VIEWPART_POSITION
-  templateProperties?: any
-  zIndex?: number
-}
-
-export type AppendViewpartAction = {
-  name: string
-  viewpart: Viewpart
-  position: VIEWPART_POSITION
-}
-
-export const appendViewpart = ({ name, viewpart, position }: AppendViewpartAction) => {
-  store.dispatch({
-    type: APPEND_VIEWPART,
-    name,
-    viewpart: {
-      ...viewpart,
-      show: viewpart.hovering && viewpart.show ? false : viewpart.show
-    },
-    position
-  })
-
-  if (viewpart.hovering && viewpart.show) {
-    openOverlay(name)
-  }
-}
-
-export const removeViewpart = (name: string) => {
-  store.dispatch({
-    type: REMOVE_VIEWPART,
-    name
-  })
-}
-
-export const updateViewpart = (name: string, override: any) => {
-  store.dispatch({
-    type: UPDATE_VIEWPART,
-    name,
-    override
-  })
-}
-
-export const APPEND_VIEWPART = 'APPEND_VIEWPART'
-export const REMOVE_VIEWPART = 'REMOVE_VIEWPART'
-export const UPDATE_VIEWPART = 'UPDATE_VIEWPART'
-
-export enum VIEWPART_POSITION {
-  HEADERBAR = 'headerbar',
-  NAVBAR = 'navbar',
-  ASIDEBAR = 'asidebar',
-  FOOTERBAR = 'footerbar',
-  PAGE_HEADERBAR = 'page-headerbar',
-  PAGE_FOOTERBAR = 'page-footerbar'
-}
-
-/**
- * 각 뷰파트 스택의 순서를 정하는 속성이다.
- * 뷰파트의 level 속성에 정의되도록 한다.
- * 맨 위/아래/좌측/우측에 보여져야하는 뷰파트는 TOPMOST 속성을 갖도록 하고,
- * 쌓인 순서대로 보여지는 뷰파트는 NORMAL 속성을 갖도록 한다.
- * default 속성은 NORMAL이다.
- */
-export enum VIEWPART_LEVEL {
-  TOPMOST = 'TOPMOST',
-  NORMAL = 'NORMAL'
-}
-
-export enum TOOL_POSITION {
-  FRONT_END = 'FRONT_END',
-  FRONT = 'FRONT',
-  CENTER = 'CENTER',
-  REAR = 'REAR',
-  REAR_END = 'REAR_END'
-}
-
-export const UPDATE_VIEWPORT_WIDTH = 'UPDATE_VIEWPORT_WIDTH'
-
-export const updateLayout = (wide?: boolean) => {
-  store.dispatch({
-    type: UPDATE_VIEWPORT_WIDTH,
-    width: wide ? 'WIDE' : 'NARROW'
-  })
-}
-
-/* overlay navigation */
-var overlaySequence = 0
-
-export const openOverlay = (name: string, options?: any, silent?: boolean) => {
-  var beforeState = history.state
-  var beforeOverlay = beforeState ? beforeState.overlay : undefined
-  var beforeSequence = !beforeOverlay || beforeOverlay.sequence === undefined ? overlaySequence : beforeOverlay.sequence
-  var afterSequence = (overlaySequence = beforeSequence + 1)
-
-  /* store의 layout의 내용을 변경한다. */
-  if (!silent && options) {
-    store.dispatch({
-      type: UPDATE_VIEWPART,
-      name,
-      override: options
-    })
-  }
-
-  /*
-   * 현재 history.state를 확인하고, overlay의 이름이 같은
-   * history에 추가하고 open 동작을 실행한다.
-   */
-  var afterState = Object.assign({}, beforeState || {}, {
-    overlay: { name, sequence: afterSequence, escapable: options?.escapable !== false }
-  })
-
-  history.pushState(afterState, '', location.href)
-
-  window.dispatchEvent(
-    new CustomEvent('popstate', {
-      detail: { state: afterState }
-    })
-  )
-}
-
-export const closeOverlay = (name: string) => {
-  /*
-   * 실제로 overlay를 close하는 작업은 window.onpopstate 핸들러에서 한다.
-   */
-  history.back()
-}
-
-export const toggleOverlay = (name: string, options: any) => {
-  var { name: beforeOverlayName } = (history.state && history.state.overlay) || {}
-
-  if (beforeOverlayName == name) {
-    closeOverlay(name)
-  } else {
-    openOverlay(name, options)
-  }
-}
-
-/*
- * popup handling
- *
- * popup은 overlay의 특별한 형태이다.
- * popup은 open될 때, viewpart를 append 하며, close 될 때 viewpart를 remove 한다.
- * - name: '$popup-${popupSequence}'
- * - position: VIEWPART_POSITION_HEADERBAR
- * - hovering: 'center' | 'next' | 'edge'
- */
-var popupSequence = 0
-
-/**
- * open popup in operato application environment
- *
- * @param {*} template html template to be rendered inside the popup
- * @param {PopupOptions} options
- * @returns popup handle object. This object is used to close the popup.
- */
-export const openPopup = (template: TemplateResult, options: PopupOptions = {}): PopupHandle => {
-  var name = `$popup-${popupSequence++}`
-
-  appendViewpart({
-    name,
-    viewpart: {
-      hovering: 'center',
-      closable: true,
-      ...options,
-      backdrop: true,
-      show: false,
-      temporary: true /* auto remove */,
-      template
-    },
-    position: VIEWPART_POSITION.HEADERBAR
-  })
-
-  openOverlay(name, options, true)
-
-  var popup = {
-    name,
-    close: () => {
-      /* 현재 overlay state를 확인해서, 자신인 경우에 history.back() 한다. */
-      var state = history.state
-      var overlay = (state || {}).overlay
-
-      overlay && overlay.name == name && history.back()
-    },
-    closed: false
-  } as PopupHandle
-
-  document.addEventListener('overlay-closed', function listener(e) {
-    if (name == (e as CustomEvent).detail) {
-      popup.closed = true
-      popup.onclosed && popup.onclosed()
-      document.removeEventListener('overlay-closed', listener)
-    }
-  })
-
-  return popup
-}
-
-setOpenPopupImplementation(openPopup)

package/src/actions/snackbar.ts

@@ -1,60 +0,0 @@
-import { Action } from 'redux'
-
-export const OPEN_SNACKBAR = 'OPEN_SNACKBAR'
-export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR'
-
-var snackbarTimer: number
-
-export type NotificationLevel = 'info' | 'warn' | 'error'
-export type Notification = {
-  message: string
-  level?: NotificationLevel
-  option?: any
-  ex?: any
-}
-
-export function notify(notification: string | Notification): void {
-  if (typeof notification === 'string') {
-    return notify({ message: notification })
-  }
-
-  var { message, level, option, ex } = notification as Notification
-
-  document.dispatchEvent(
-    new CustomEvent('notify', {
-      detail: { message, level, ex, option }
-    })
-  )
-}
-
-export type SnackbarAction = {
-  type: 'OPEN_SNACKBAR' | 'CLOSE_SNACKBAR'
-  level?: NotificationLevel
-  message?: string
-  action?: any
-}
-
-export const showSnackbar =
-  (
-    level: NotificationLevel,
-    {
-      message,
-      action,
-      timer = 5000
-    }: {
-      message: string
-      action?: any
-      timer?: number
-    }
-  ) =>
-  (dispatch: (param: SnackbarAction) => Action<any>) => {
-    dispatch({
-      type: OPEN_SNACKBAR,
-      level,
-      message,
-      action
-    })
-    window.clearTimeout(snackbarTimer)
-
-    if (timer != -1) snackbarTimer = window.setTimeout(() => dispatch({ type: CLOSE_SNACKBAR }), timer)
-  }

package/src/components/ox-resize-splitter.ts

@@ -1,137 +0,0 @@
-import { LitElement, css, html } from 'lit'
-
-import { customElement } from 'lit/decorators.js'
-
-@customElement('ox-resize-splitter')
-export class ResizeSplitter extends LitElement {
-  static styles = css`
-    :host {
-      position: relative;
-      opacity: 0.7;
-      background-color: var(--splitter-background-color);
-    }
-
-    :host(:hover) {
-      background-color: var(--splitter-hover-background-color);
-    }
-
-    div {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  `
-
-  private dragstart?: { x: number; y: number }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    if (this.hasAttribute('vertical')) {
-      this.style.width = '3px'
-      this.style.height = '100%'
-      this.style.cursor = 'col-resize'
-    } else {
-      this.style.width = '100%'
-      this.style.height = '3px'
-      this.style.cursor = 'row-resize'
-    }
-  }
-
-  render() {
-    return html` <div @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}></div> `
-  }
-
-  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함
-  _throttled(delay: number, fn: (...args: any) => void) {
-    let lastCall = 0
-    return function (...args: any) {
-      const now = new Date().getTime()
-      if (now - lastCall < delay) {
-        return
-      }
-      lastCall = now
-      return fn(...args)
-    }
-  }
-
-  private onMouseDown(e: MouseEvent) {
-    this.dragstart = {
-      x: e.clientX,
-      y: e.clientY
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-dragstart', {
-        bubbles: true,
-        composed: true
-      })
-    )
-
-    window.addEventListener('mousemove', this.onMouseMoveHandler)
-    window.addEventListener('mouseup', this.onMouseUpHandler)
-
-    e.stopPropagation()
-  }
-
-  onMouseMoveHandler = this._throttled(100, this.onMouseMove.bind(this)) // this.onMouseMove.bind(this)
-  onMouseUpHandler = this.onMouseUp.bind(this)
-
-  private onMouseMove(e: MouseEvent) {
-    if (!this.dragstart) {
-      return
-    }
-
-    e.preventDefault()
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-drag', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          x: e.clientX - this.dragstart!.x,
-          y: e.clientY - this.dragstart!.y
-        }
-      })
-    )
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-    })
-
-    if (this.hasAttribute('vertical')) {
-      document.body.style.cursor = 'col-resize'
-    } else {
-      document.body.style.cursor = 'row-resize'
-    }
-
-    document.body.style.userSelect = 'none'
-
-    e.stopPropagation()
-  }
-
-  private onMouseUp(e: MouseEvent) {
-    window.removeEventListener('mousemove', this.onMouseMoveHandler)
-    window.removeEventListener('mouseup', this.onMouseUpHandler)
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-dragend', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          x: e.clientX - this.dragstart!.x,
-          y: e.clientY - this.dragstart!.y
-        }
-      })
-    )
-
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-      delete this.dragstart
-    })
-
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-
-    e.stopPropagation()
-  }
-}

package/src/components/ox-split-pane.ts

@@ -1,113 +0,0 @@
-import { LitElement, html, css, PropertyValues, nothing } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-@customElement('ox-split-pane')
-export class OxSplitPane extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: var(--flex-direction, column);
-
-      width: 100%;
-      height: 100%;
-    }
-
-    #splitter {
-      background-color: #ccc;
-      cursor: var(--cursor-shape, col-resize);
-    }
-
-    #splitter {
-      background-color: #ccc;
-      cursor: var(--cursor-shape, col-resize);
-      color: var(--md-sys-color-on-primary-container, #ccc);
-    }
-
-    :host([direction='row']) #splitter {
-      height: 100%;
-      width: 4px;
-    }
-
-    :host([direction='column']) #splitter {
-      width: 100%;
-      height: 4px;
-    }
-
-    ::slotted(*) {
-      overflow: hidden;
-    }
-
-    slot[name='front']::slotted(*) {
-      flex: var(--split-ratio, 0.5);
-    }
-
-    slot[name='back']::slotted(*) {
-      flex: calc(1 - var(--split-ratio, 0.5));
-    }
-  `
-
-  @property({ type: String, attribute: true }) direction: string = 'row'
-  @property({ type: Number, attribute: true }) ratio: number = 0.5
-  @property({ type: Boolean, attribute: true }) resizable: boolean = false
-
-  @query('#splitter') splitter!: HTMLDivElement
-
-  render() {
-    return html`
-      <slot name="front"></slot>
-      ${this.resizable
-        ? html`<div id="splitter" @mousedown=${this.startDragging} direction=${this.direction}></div>`
-        : nothing}
-      <slot name="back"></slot>
-    `
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('direction')) {
-      this.style.setProperty('--flex-direction', this.direction)
-      this.style.setProperty('--cursor-shape', this.direction == 'row' ? 'col-resize' : 'row-resize')
-    }
-
-    if (changes.has('ratio')) {
-      this.style.setProperty('--split-ratio', String(this.ratio))
-    }
-  }
-
-  startDragging(e: MouseEvent) {
-    e.stopPropagation()
-    e.preventDefault()
-
-    document.addEventListener('mousemove', this.drag)
-    document.addEventListener('mouseup', this.stopDragging)
-
-    document.body.style.cursor = this.direction == 'row' ? 'col-resize' : 'row-resize'
-  }
-
-  drag = (e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-
-    const { width, height, left, top } = this.getBoundingClientRect()
-
-    const mouseX = e.clientX - left
-    const mouseY = e.clientY - top
-
-    if (this.direction == 'row') {
-      const totalWidth = this.offsetWidth
-      this.ratio = mouseX / width
-    } else {
-      const totalHeight = this.offsetHeight
-      this.ratio = mouseY / height
-    }
-  }
-
-  stopDragging = (e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-
-    document.removeEventListener('mousemove', this.drag)
-    document.removeEventListener('mouseup', this.stopDragging)
-
-    document.body.style.cursor = 'auto'
-  }
-}

package/src/index.ts

@@ -1,16 +0,0 @@
-import './initializer'
-
-export { PopupHandle, PopupOptions } from '@operato/popup'
-
-export * from './layouts/ox-snack-bar.js'
-export * from './layouts/ox-header-bar.js'
-export * from './layouts/ox-nav-bar.js'
-export * from './layouts/ox-aside-bar.js'
-export * from './layouts/ox-footer-bar.js'
-export * from './layouts/ox-page-header-bar.js'
-export * from './layouts/ox-page-footer-bar.js'
-
-export * from './actions/layout'
-export * from './actions/snackbar'
-
-export * from './components/ox-split-pane'

package/src/initializer.ts

@@ -1,113 +0,0 @@
-import { REGISTER_NAVIGATION_CALLBACK, store } from '@operato/shell'
-import { UPDATE_VIEWPART, closeOverlay, openOverlay, openPopup, toggleOverlay } from './actions/layout'
-
-import layout from './reducers/layout'
-import { showSnackbar } from './actions/snackbar'
-import snackbar from './reducers/snackbar'
-
-store.addReducers({
-  layout,
-  snackbar
-})
-
-document.addEventListener('open-overlay', event => {
-  const { name, options } = (event as CustomEvent).detail
-  openOverlay(name, options)
-})
-
-document.addEventListener('close-overlay', event => {
-  const { name } = (event as CustomEvent).detail
-  closeOverlay(name)
-})
-
-document.addEventListener('toggle-overlay', event => {
-  const { name, options } = (event as CustomEvent).detail
-  toggleOverlay(name, options)
-})
-
-document.addEventListener('open-popup', event => {
-  const { template, options, callback } = (event as CustomEvent).detail
-  var popup = openPopup(template, options)
-  if (popup && callback) callback(popup)
-})
-
-document.addEventListener('notify', event => {
-  let { message, level, ex = '', option = {} } = (event as CustomEvent).detail
-
-  switch (level) {
-    case 'error':
-      console.error(message, ex)
-      break
-    case 'warn':
-      console.warn(message, ex)
-      break
-    case 'info':
-      console.info(message)
-      break
-    default:
-      break
-  }
-
-  store.dispatch(
-    showSnackbar(level, {
-      message,
-      ...(option as {
-        action?: any
-        timer?: number
-      })
-    }) as any
-  )
-})
-
-/* overlay handling */
-var overlayStack: any[] = []
-function getLastSequence() {
-  return overlayStack.length > 0 ? overlayStack[overlayStack.length - 1].overlay.sequence : -1
-}
-
-document.addEventListener('keydown', event => {
-  if (overlayStack.length > 0 && (event.key === 'Escape' || event.key === 'Esc')) {
-    history.state?.overlay?.escapable && history.back()
-  }
-})
-
-const historyHandler = (location: string, event: Event) => {
-  var navigated = event instanceof PopStateEvent
-
-  var state = history.state
-  var overlay = state?.overlay
-  var sequence = overlay?.sequence || -1
-
-  var lastSequence = getLastSequence()
-
-  if (overlayStack.length > 0 && sequence < lastSequence) {
-    /* overlay 관련 history가 아닌 경우. */
-    do {
-      let { overlay } = overlayStack.pop()
-      store.dispatch({
-        type: UPDATE_VIEWPART,
-        name: overlay.name,
-        override: { show: false }
-      })
-
-      lastSequence = getLastSequence()
-    } while (sequence < lastSequence)
-  }
-
-  if (!navigated && overlay) {
-    overlayStack.push({ ...state })
-
-    store.dispatch({
-      type: UPDATE_VIEWPART,
-      name: overlay.name,
-      override: { show: true }
-    })
-  }
-}
-
-store.dispatch({
-  type: REGISTER_NAVIGATION_CALLBACK,
-  callback: historyHandler
-})
-
-export default store