@things-factory/shell 5.0.0-zeta.7 → 5.0.0

package/client/app/app.js

@@ -1,225 +0,0 @@
-import '@operato/layout'
-
-import { LitElement, html } from 'lit'
-import { UPDATE_ACTIVE_PAGE, UPDATE_CONTEXT_PATH, UPDATE_MODULES, navigateWithSilence, store } from '@operato/shell'
-
-import { AppStyle } from './app-style'
-import { ScrollbarStyles } from '@operato/styles'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { getPathInfo } from '@operato/utils'
-import { installRouter } from 'pwa-helpers/router.js'
-import throttle from 'lodash-es/throttle'
-
-class ThingsApp extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      _contextPath: String,
-      _page: String,
-      _pages: Object,
-      _resourceId: String,
-      _params: Object,
-      _callbacks: Array,
-      _activePage: Object,
-      _context: Object,
-      _modules: Array
-    }
-  }
-
-  static get styles() {
-    return [ScrollbarStyles, AppStyle]
-  }
-
-  render() {
-    var params = this._params || {}
-    var fullbleed = (this._context && this._context.fullbleed) || (params.fullbleed && params.fullbleed == 'Y')
-    var widebleed = (this._context && this._context.widebleed) || (params.widebleed && params.widebleed == 'Y')
-
-    return html`
-      <ox-header-bar ?fullbleed=${fullbleed}></ox-header-bar>
-
-      <ox-nav-bar ?fullbleed=${fullbleed || widebleed}></ox-nav-bar>
-
-      <main></main>
-
-      <ox-aside-bar ?fullbleed=${fullbleed || widebleed}></ox-aside-bar>
-
-      <ox-footer-bar ?fullbleed=${fullbleed}></ox-footer-bar>
-
-      <ox-snack-bar></ox-snack-bar>
-    `
-  }
-
-  constructor() {
-    super()
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    window.addEventListener('resize', () => this.resized())
-
-    /* 모듈 임포트를 동적으로 처리한다. */
-    import(
-      /* webpackPrefetch: true */
-      /* webpackPreload: true */
-      /* webpackChunkName: "modules" */
-      '../module-importer.import'
-    ).then(module => {
-      var modules = module.modules
-
-      /* lifecycle - bootstrapping */
-      this.dispatchEvent(new Event('lifecycle-bootstrap-begin'))
-      modules.forEach((m, idx) => {
-        try {
-          m.bootstrap && m.bootstrap()
-          // console.info(`[${idx} BOOTSTRAPED - ${m.name}]`)
-        } catch (e) {
-          console.error(`[${idx} BOOTSTRAP ERROR -${m.name}]`, e)
-        }
-      })
-      this.dispatchEvent(new Event('lifecycle-bootstrap-finish'))
-
-      /* shouldUpdate를 활성화한다. */
-      this._moduleInitialized = true
-
-      /* modules를 store에 dispatch 함으로써, update를 invoke 시킨다. */
-      store.dispatch({
-        type: UPDATE_MODULES,
-        modules
-      })
-
-      installRouter((location, e) => {
-        var { contextPath } = getPathInfo(location.pathname)
-
-        if (this._contextPath !== contextPath) {
-          store.dispatch({
-            type: UPDATE_CONTEXT_PATH,
-            contextPath
-          })
-        }
-
-        store.dispatch(navigateWithSilence(location))
-        this._callbacks &&
-          this._callbacks.forEach(callback => {
-            try {
-              callback.call(this, location, e)
-            } catch (ex) {
-              console.error(ex)
-            }
-          })
-      })
-    })
-
-    this.setBase()
-  }
-
-  resized() {
-    if (!this._throttledResize) {
-      this._throttledResize = throttle(() => {
-        const aside = this.renderRoot.querySelector('ox-aside-bar').clientWidth
-        const nav = this.renderRoot.querySelector('ox-nav-bar').clientWidth
-
-        this.style.setProperty(
-          '--app-grid-template-columns',
-          `auto minmax(calc(100vw - ${aside}px - ${nav}px), 1fr) auto`
-        )
-      }, 100)
-    }
-
-    this._throttledResize()
-  }
-
-  routeToPage() {
-    let activePages = this.shadowRoot.querySelectorAll('main > .page[active]')
-    activePages.forEach(page => {
-      page.removeAttribute('active')
-    })
-
-    this._activePage = this.shadowRoot.querySelector(`main > .page[data-page=${this._page}]`)
-
-    if (!this._activePage) {
-      /* 해당 route에 연결된 page가 없는 경우에 main 섹션에 해당 element를 추가해준다. */
-      var tagname = this._pages[this._page]
-      if (tagname) {
-        var main = this.shadowRoot.querySelector('main')
-
-        var el = document.createElement(tagname)
-        el.setAttribute('class', 'page')
-        el.setAttribute('data-page', this._page)
-
-        main.appendChild(el)
-
-        this._activePage = el
-      }
-    }
-
-    if (this._activePage) {
-      this._activePage.setAttribute('active', true)
-      this._activePage.setAttribute('context-path', this._contextPath)
-      this._activePage.lifecycle = {
-        ...(this._activePage.lifecycle || {}),
-        active: true,
-        params: this._params,
-        resourceId: this._resourceId,
-        page: this._page
-      }
-    }
-
-    store.dispatch({
-      type: UPDATE_ACTIVE_PAGE,
-      activePage: this._activePage
-    })
-  }
-
-  async updated(changedProps) {
-    if (changedProps.has('_modules')) {
-      this._readyPageList()
-    }
-
-    if (changedProps.has('_page') || changedProps.has('_resourceId') || changedProps.has('_params')) {
-      this.routeToPage()
-    }
-
-    if (changedProps.has('_contextPath')) {
-      this.setBase()
-    }
-
-    this.resized()
-  }
-
-  shouldUpdate() {
-    return this._moduleInitialized
-  }
-
-  stateChanged(state) {
-    this._page = state.route.page
-    this._params = state.route.params
-    this._resourceId = state.route.resourceId
-    this._callbacks = state.route.callbacks
-    this._context = state.route.context
-    this._modules = state.app.modules
-    this._contextPath = state.app.contextPath
-  }
-
-  _readyPageList() {
-    var reversedModules = [...this._modules].reverse()
-    this._pages = {}
-
-    /* 모듈 참조 순서 역순으로 page를 추가한다. (for overidable) */
-    reversedModules.forEach(m => {
-      m.routes &&
-        m.routes.forEach(route => {
-          if (!this._pages[route.page]) {
-            this._pages[route.page] = route.tagname
-          }
-        })
-    })
-  }
-
-  setBase() {
-    var base = document.querySelector('base')
-    base.setAttribute('href', this._contextPath ? `${this._contextPath}/` : '/')
-  }
-}
-
-window.customElements.define('things-app', ThingsApp)

package/client/app/pages/page-404.js

@@ -1,59 +0,0 @@
-import { css, html } from 'lit'
-
-import { PageView } from '@operato/shell'
-
-class Page404 extends PageView {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        box-sizing: border-box;
-
-        background-color: var(--main-section-background-color);
-        --padding-wide: 15%;
-      }
-      section {
-        padding: var(--padding-wide) 0 0 0;
-        text-align: center;
-        color: var(--secondary-color);
-      }
-      mwc-icon {
-        --mdc-icon-size: 120px;
-        color: var(--status-danger-color);
-        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-      }
-      h2 {
-        margin: 0 auto;
-        font-size: 2.5em;
-        text-transform: capitalize;
-      }
-      @media only screen and (max-width: 460px) {
-        mwc-icon {
-          padding-top: 25%;
-          --mdc-icon-size: 90px;
-        }
-        h2 {
-          font-size: 2em;
-        }
-      }
-    `
-  }
-
-  get context() {
-    return {
-      title: 'Page Not Found'
-    }
-  }
-
-  render() {
-    return html`
-      <section>
-        <mwc-icon>error_outline</mwc-icon>
-        <h2>page not found!</h2>
-        The page you requested cannot be found.
-      </section>
-    `
-  }
-}
-
-customElements.define('page-404', Page404)