@operato/layout 0.3.21 → 0.3.27

package/src/components/ox-floating-overlay.ts

@@ -0,0 +1,319 @@
+import '@operato/help/ox-help-icon.js'
+import '@material/mwc-icon'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('ox-floating-overlay')
+class FloatingOverlay extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      /* for layout style */
+      :host {
+        position: relative;
+        z-index: 1;
+      }
+
+      :host([hovering='edge']) {
+        /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */
+        position: initial;
+      }
+
+      #backdrop {
+        position: fixed;
+        left: 0;
+        top: 0;
+
+        width: 100vw;
+        height: 100vh;
+
+        background-color: var(--overlay-background-color);
+      }
+
+      [overlayed] {
+        position: absolute;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: transparent;
+        pointer-events: none;
+      }
+
+      [overlayed][hovering='center'] {
+        position: fixed;
+
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        opacity: 0;
+      }
+
+      [overlayed][hovering='center'][opened] {
+        opacity: 1;
+        transition: opacity 0.3s ease-in;
+      }
+
+      [hovering='center'] {
+        width: var(--overlay-center-normal-width, 60%);
+        height: var(--overlay-center-normal-height, 60%);
+      }
+
+      [hovering='center'][size='small'] {
+        width: var(--overlay-center-small-width, 40%);
+        height: var(--overlay-center-small-height, 40%);
+      }
+
+      [hovering='center'][size='large'] {
+        width: var(--overlay-center-large-width, 100%);
+        height: var(--overlay-center-large-height, 100%);
+      }
+
+      [header] {
+        --help-icon-color: #fff;
+        --help-icon-hover-color: #fff;
+
+        pointer-events: initial;
+      }
+
+      [content] {
+        flex: 1;
+
+        overflow: hidden;
+      }
+
+      ::slotted(*) {
+        box-sizing: border-box;
+        pointer-events: initial;
+      }
+
+      [hovering='center'] [content] ::slotted(*) {
+        width: 100%;
+        height: 100%;
+      }
+      [direction='up'],
+      [direction='down'] {
+        width: 100%;
+
+        max-height: 0;
+        transition: max-height 0.7s ease-in;
+      }
+      [direction='up'] {
+        bottom: 0;
+      }
+      [direction='down'] {
+        top: 0;
+      }
+
+      [direction='up'][opened],
+      [direction='down'][opened] {
+        max-height: 100vh;
+      }
+
+      [settled][direction='down'] [content],
+      [settled][direction='up'] [content] {
+        overflow-y: auto;
+      }
+
+      [direction='left'],
+      [direction='right'] {
+        height: 100%;
+
+        max-width: 0;
+        transition: max-width 0.5s ease-in;
+      }
+      [direction='left'] {
+        right: 0;
+      }
+      [direction='right'] {
+        left: 0;
+      }
+
+      [direction='left'][opened],
+      [direction='right'][opened] {
+        max-width: 100vw;
+      }
+
+      [settled][direction='left'] [content],
+      [settled][direction='right'] [content] {
+        overflow-x: auto;
+      }
+
+      @media screen and (max-width: 460px) {
+        [direction='up'],
+        [direction='down'] {
+          max-height: 100vh;
+        }
+
+        [direction='left'],
+        [direction='right'] {
+          max-width: 100vw;
+        }
+      }
+    `,
+    css`
+      /* for header style */
+      [header] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        background-color: var(--overlay-header-background-color);
+        color: var(--overlay-header-color);
+      }
+
+      slot[name='header'] {
+        flex: 1;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [name='header']::slotted(*) {
+        margin: 0 auto;
+      }
+
+      [name='header'] > h1 {
+        text-transform: capitalize;
+        font: var(--overlay-header-font);
+      }
+
+      [historyback] {
+        margin-left: 10px;
+        margin-right: auto;
+      }
+
+      [close] {
+        margin-left: auto;
+        margin-right: 10px;
+      }
+
+      [historyback],
+      [close] {
+        display: none;
+      }
+
+      [closable][close] {
+        display: block;
+      }
+
+      @media screen and (max-width: 460px) {
+        [closable][historyback] {
+          display: block;
+        }
+
+        [closable][close] {
+          display: none;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) backdrop: boolean = false
+  @property({ type: String }) direction?: 'up' | 'down' | 'left' | 'right'
+  @property({ type: String, reflect: true }) hovering?: 'center' | 'edge'
+  @property({ type: String }) size?: 'small' | 'normal' | 'large'
+  @property({ type: String }) name?: string
+  @property({ type: String }) title: string = ''
+  @property({ type: Boolean }) closable: boolean = false
+  @property({ type: Object }) templateProperties: any
+  @property({ type: Object }) help: any
+
+  render() {
+    var direction = this.hovering == 'center' ? false : this.direction
+
+    return html`
+      ${Boolean(this.backdrop)
+        ? html` <div id="backdrop" ?hidden=${!this.backdrop} @click=${() => this.onClose(true)}></div> `
+        : html``}
+
+      <div
+        overlayed
+        hovering=${this.hovering || 'center'}
+        direction=${direction}
+        size=${this.size || 'normal'}
+        @close-overlay=${() => this.onClose()}
+        @transitionstart=${(e: Event) => {
+          /* to hide scrollbar during transition */
+          ;(e.target as HTMLElement).removeAttribute('settled')
+        }}
+        @transitionend=${(e: Event) => {
+          ;(e.target as HTMLElement).setAttribute('settled', '')
+        }}
+      >
+        <div header>
+          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} historyback>arrow_back</mwc-icon>
+          <slot name="header">
+            ${this.title || this.closable
+              ? html`
+                  <h1>
+                    ${this.title || ''}&nbsp;${this.help
+                      ? html` <ox-help-icon .topic=${this.help}></ox-help-icon>`
+                      : html``}
+                  </h1>
+                `
+              : html``}</slot
+          >
+          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} close>close</mwc-icon>
+        </div>
+
+        <div content>
+          <slot> </slot>
+        </div>
+      </div>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('templateProperties') && this.templateProperties) {
+      var template = this.firstElementChild
+      if (template) {
+        for (let prop in this.templateProperties) {
+          //@ts-ignore
+          template[prop] = this.templateProperties[prop]
+        }
+      }
+    }
+  }
+
+  firstUpdated() {
+    requestAnimationFrame(() => {
+      /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
+      this.renderRoot.querySelector('[overlayed]')?.setAttribute('opened', 'true')
+    })
+  }
+
+  disconnectedCallback() {
+    document.dispatchEvent(
+      new CustomEvent('overlay-closed', {
+        detail: this.name
+      })
+    )
+
+    super.disconnectedCallback()
+  }
+
+  onClose(escape?: boolean) {
+    /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */
+
+    var state = history.state
+    var overlay = (state || {}).overlay
+
+    if (!overlay || overlay.name !== this.name) {
+      return
+    }
+
+    /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */
+    if (escape && !overlay.escapable) {
+      return true
+    }
+
+    history.back()
+  }
+}

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

@@ -0,0 +1,126 @@
+import { css, html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('ox-resize-splitter')
+export class ResizeSplitter extends LitElement {
+  static _dragImage: HTMLImageElement
+
+  static get dragImage() {
+    if (!ResizeSplitter._dragImage) {
+      ResizeSplitter._dragImage = new Image()
+      ResizeSplitter._dragImage.src =
+        'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
+    }
+    return ResizeSplitter._dragImage
+  }
+
+  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
+        draggable="true"
+        @dragstart=${(e: DragEvent) => this._onDragStart(e)}
+        @drag=${this._throttled(100, this._onDrag.bind(this))}
+        @dragend=${(e: DragEvent) => this._onDragEnd(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)
+    }
+  }
+
+  _onDragStart(e: DragEvent) {
+    e.dataTransfer!.setDragImage(ResizeSplitter.dragImage, 0, 0)
+
+    this.dragstart = {
+      x: e.clientX,
+      y: e.clientY
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('splitter-dragstart', {
+        bubbles: true,
+        composed: true
+      })
+    )
+
+    e.stopPropagation()
+  }
+
+  _onDrag(e: DragEvent) {
+    if (e.clientX == 0) {
+      return
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('splitter-drag', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          x: e.clientX - this.dragstart!.x,
+          y: e.clientY - this.dragstart!.y
+        }
+      })
+    )
+
+    e.stopPropagation()
+  }
+
+  _onDragEnd(e: DragEvent) {
+    this.dispatchEvent(
+      new CustomEvent('splitter-dragend', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          x: e.clientX - this.dragstart!.x,
+          y: e.clientY - this.dragstart!.y
+        }
+      })
+    )
+
+    e.stopPropagation()
+  }
+}

package/src/index.ts

@@ -1 +1,10 @@
-export * from './ox-layout'
+import './initializer'
+
+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 './actions/layout'
+export * from './actions/snackbar'

package/src/initializer.ts

@@ -0,0 +1,113 @@
+import { REGISTER_NAVIGATION_CALLBACK, store } from '@operato/shell'
+
+import { closeOverlay, openOverlay, openPopup, toggleOverlay, UPDATE_VIEWPART } from './actions/layout'
+import { showSnackbar } from './actions/snackbar'
+import layout from './reducers/layout'
+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.keyCode == 27 /* 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

@@ -0,0 +1,106 @@
+import '../components/ox-floating-overlay.js'
+import '../components/ox-resize-splitter.js'
+
+import { css, html, LitElement } from 'lit'
+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}
+                >${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)?.querySelectorAll('*')
+    Array.from(x).forEach(ele => {
+      ;(ele as HTMLElement).style.width = `${this._startWidth - delta.x}px`
+    })
+  }
+
+  stateChanged(state: any) {
+    this.viewparts = state.layout.viewparts || {}
+  }
+}