@operato/layout 8.0.0-alpha.51 → 8.0.0-beta.1

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

package/src/layouts/ox-aside-bar.ts

@@ -1,111 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
-import store from '../initializer.js'
-
-@customElement('ox-aside-bar')
-class AsideBar extends connect(store)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-flow: row-reverse nowrap;
-        align-items: stretch;
-
-        position: relative;
-      }
-
-      *[asidebar] {
-        display: block;
-        overflow-y: auto;
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
-
-  @state() viewparts: { [name: string]: Viewpart } = {}
-
-  private _startWidth: number = 0
-
-  render() {
-    var viewparts = this.viewparts
-    var asidebars = Object.keys(viewparts)
-      .map(name => {
-        return {
-          name,
-          ...viewparts[name]
-        }
-      })
-      .filter(viewpart => viewpart.position == 'asidebar' && (!this.fullbleed || viewpart.hovering))
-
-    asidebars = [
-      ...asidebars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
-      ...asidebars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
-    ]
-
-    return html`
-      ${asidebars.map(asidebar =>
-        !asidebar.show
-          ? html``
-          : asidebar.hovering
-            ? html`
-                <ox-floating-overlay
-                  .backdrop=${asidebar.backdrop}
-                  direction="left"
-                  .hovering=${asidebar.hovering}
-                  .name=${asidebar.name}
-                  .size=${asidebar.size}
-                  .title=${asidebar.title}
-                  .help=${asidebar.help}
-                  .closable=${asidebar.closable}
-                  .templateProperties=${asidebar.templateProperties}
-                  .historical=${true}
-                  .search=${asidebar.search}
-                  .filter=${asidebar.filter}
-                  z-index=${ifDefined(asidebar.zIndex)}
-                  >${asidebar.template}</ox-floating-overlay
-                >
-              `
-            : html`
-                <div asidebar>${asidebar.template}</div>
-                ${asidebar.resizable
-                  ? html`
-                      <ox-resize-splitter
-                        @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
-                        @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
-                        vertical
-                      ></ox-resize-splitter>
-                    `
-                  : html``}
-              `
-      )}
-    `
-  }
-
-  resizeStart(e: CustomEvent) {
-    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth
-  }
-
-  resizeDrag(e: CustomEvent) {
-    var delta = e.detail
-
-    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.children
-    Array.from(x).forEach(ele => {
-      ;(ele as HTMLElement).style.width = `${this._startWidth - delta.x}px`
-    })
-  }
-
-  stateChanged(state: any) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}

package/src/layouts/ox-footer-bar.ts

@@ -1,112 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
-import store from '../initializer.js'
-
-@customElement('ox-footer-bar')
-class FooterBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-flow: column-reverse nowrap;
-        align-items: stretch;
-        position: relative;
-      }
-
-      *[footerbar] {
-        display: block;
-        max-width: 100vw;
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          padding-bottom: 0;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
-
-  @state() viewparts: { [name: string]: Viewpart } = {}
-
-  private _startHeight: number = 0
-
-  render() {
-    var viewparts = this.viewparts
-    var footerbars = Object.keys(viewparts)
-      .map(name => {
-        return {
-          name,
-          ...viewparts[name]
-        }
-      })
-      .filter(viewpart => viewpart.position == 'footerbar' && (!this.fullbleed || viewpart.hovering))
-
-    footerbars = [
-      ...footerbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
-      ...footerbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
-    ]
-
-    return html`
-      ${footerbars.map(footerbar =>
-        !footerbar.show
-          ? html``
-          : footerbar.hovering
-            ? html`
-                <ox-floating-overlay
-                  .backdrop=${footerbar.backdrop}
-                  direction="up"
-                  .hovering=${footerbar.hovering}
-                  .name=${footerbar.name}
-                  .title=${footerbar.title || ''}
-                  .help=${footerbar.help}
-                  .size=${footerbar.size}
-                  .closable=${footerbar.closable}
-                  .templateProperties=${footerbar.templateProperties}
-                  .historical=${true}
-                  .search=${footerbar.search}
-                  .filter=${footerbar.filter}
-                  z-index=${ifDefined(footerbar.zIndex)}
-                  >${footerbar.template}</ox-floating-overlay
-                >
-              `
-            : html`
-                <div footerbar>${footerbar.template}</div>
-                ${footerbar.resizable
-                  ? html`
-                      <ox-resize-splitter
-                        @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
-                        @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
-                      ></ox-resize-splitter>
-                    `
-                  : html``}
-              `
-      )}
-    `
-  }
-
-  resizeStart(e: CustomEvent) {
-    this._startHeight = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetHeight
-  }
-
-  resizeDrag(e: CustomEvent) {
-    var delta = e.detail
-
-    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).children
-    Array.from(x).forEach(ele => {
-      ;(ele as HTMLElement).style.height = `${this._startHeight - delta.y}px`
-    })
-  }
-
-  stateChanged(state: any) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}