@operato/board 8.0.0-alpha.9 → 8.0.0-beta.1

package/src/ox-board-player.ts

@@ -1,331 +0,0 @@
-import '@material/web/icon/icon.js'
-import './player/ox-board-wrapper'
-import './player/ox-board-player-carousel'
-
-import { html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { exitfullscreen, SwipeListener, togglefullscreen } from '@operato/utils'
-
-import { PlaylistStorage } from './data-storage/data-storage.js'
-import { style } from './ox-board-player-style'
-
-const DEFAULT_PLAYLIST = String('__default__')
-
-@customElement('ox-board-player')
-export class BoardPlayer extends LitElement {
-  static styles = style
-
-  @property({ type: String }) playlist: string = DEFAULT_PLAYLIST
-  @property({ type: Array }) boards: Array<any> = []
-  @property({ type: Number }) playtime = 30
-  @property({ type: Number }) columns = 1
-  @property({ type: Number }) rows = 1
-  @property({ type: Boolean }) started = false
-  @property({ type: Boolean }) playing = false
-  @property({ type: Object }) provider: any
-  @property({ type: Object }) data: any
-
-  @state() _controlAnimation?: Animation
-  @state() _transferTimer?: any
-  @state() _currentPlayer?: any
-  @state() _fullscreened = false
-
-  @query('#control') _control!: HTMLElement
-
-  private playlistStorage: PlaylistStorage = new PlaylistStorage()
-
-  render() {
-    return html`
-      <slot @mousemove=${() => this.onMousemove()} @transform=${() => this.onTransform()} tabindex="-1">
-        ${this.started
-          ? html`
-              <ox-board-player-carousel axis="y" .rows=${this.rows} .columns=${this.columns} player>
-                ${this.boards.map(
-                  item => html`
-                    <ox-board-wrapper page .board=${item} .data=${this.data} .provider=${this.provider}>
-                    </ox-board-wrapper>
-                  `
-                )}
-              </ox-board-player-carousel>
-            `
-          : html``}
-      </slot>
-
-      <div id="control" @mouseover=${() => this.onMouseoverControl()} hidden>
-        <div id="joystick">
-          <md-icon id="up" @click=${() => this.moveUp()}>keyboard_arrow_up</md-icon>
-          <md-icon id="left" @click=${() => this.moveLeft()}>keyboard_arrow_left</md-icon>
-          <md-icon id="play" @click=${() => this.play()} ?hidden=${this.playing}>play_arrow</md-icon>
-          <md-icon id="pause" @click=${() => this.pause()} ?hidden=${!this.playing}>pause</md-icon>
-          <md-icon id="right" @click=${() => this.moveRight()}>keyboard_arrow_right</md-icon>
-          <md-icon id="down" @click=${() => this.moveDown()}>keyboard_arrow_down</md-icon>
-        </div>
-
-        <div id="setting-container">
-          <div id="setting">
-            <label id="schedule-container">
-              <md-icon id="schedule">schedule</md-icon>
-              <input
-                .value=${String(this.playtime)}
-                @change=${(e: Event) => {
-                  this.playtime = Number((e.target as HTMLInputElement).value)
-                  this.playlistStorage.save(this.playlist, {
-                    playtime: this.playtime,
-                    columns: this.columns,
-                    rows: this.rows
-                  })
-                }}
-              />
-              sec.
-            </label>
-            <div id="grid-setting-container">
-              <md-icon id="view_module">view_module</md-icon>
-              <select
-                .value=${String(this.rows)}
-                @change=${(e: Event) => {
-                  this.rows = Number((e.target as HTMLInputElement).value)
-                  this.playlistStorage.save(this.playlist, {
-                    playtime: this.playtime,
-                    columns: this.columns,
-                    rows: this.rows
-                  })
-                }}
-              >
-                ${[1, 2, 3, 4, 5].map(row => html` <option>${row}</option> `)}
-              </select>
-              x
-              <select
-                .value=${String(this.columns)}
-                @change=${(e: Event) => {
-                  this.columns = Number((e.target as HTMLInputElement).value)
-                  this.playlistStorage.save(this.playlist, {
-                    playtime: this.playtime,
-                    columns: this.columns,
-                    rows: this.rows
-                  })
-                }}
-              >
-                ${[1, 2, 3, 4, 5].map(column => html` <option>${column}</option> `)}
-              </select>
-            </div>
-          </div>
-
-          <div id="etc">
-            <md-icon id="fullscreen" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}
-              >fullscreen</md-icon
-            >
-            <md-icon id="fullscreen-exit" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}
-              >fullscreen_exit</md-icon
-            >
-            <md-icon id="close" @click=${() => this.onTapClose()}>close</md-icon>
-          </div>
-        </div>
-      </div>
-    `
-  }
-
-  async firstUpdated() {
-    const setting = await this.playlistStorage.load(this.playlist)
-
-    if (setting) {
-      const { playtime = 30, columns = 1, rows = 1 } = setting || {}
-
-      this.playtime = playtime
-      this.columns = columns
-      this.rows = rows
-    }
-
-    SwipeListener(this)
-
-    this.addEventListener('swipe', (e: Event) => {
-      var directions = (e as any).detail.directions
-
-      if (directions.left) {
-        this.moveRight()
-      } else if (directions.right) {
-        this.moveLeft()
-      } else if (directions.top) {
-        this.moveDown()
-      } else if (directions.bottom) {
-        this.moveUp()
-      }
-    })
-
-    this.setAttribute('tabindex', '0')
-    this.addEventListener('keydown', (e: KeyboardEvent) => {
-      switch (e.key) {
-        case 'Right': // for IE/Edge
-        case 'ArrowRight':
-          e.stopPropagation()
-          this.moveRight()
-          break
-
-        case 'Left': // for IE/Edge
-        case 'ArrowLeft':
-          e.stopPropagation()
-          this.moveLeft()
-          break
-
-        case 'Up': // for IE/Edge
-        case 'ArrowUp':
-          e.stopPropagation()
-          this.moveUp()
-          break
-
-        case 'Down': // for IE/Edge
-        case 'ArrowDown':
-          e.stopPropagation()
-          this.moveDown()
-          break
-      }
-    })
-
-    this.focus()
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('boards') || changes.has('columns') || changes.has('rows')) {
-      this.boards && this.boards.length > 0 ? this.restart() : this.stop()
-    } else if (changes.has('playtime') && this.playing) {
-      this._resetTransformTimer()
-    }
-  }
-
-  async _resetFadeTimer(stop?: boolean) {
-    if (!this._controlAnimation) {
-      this._controlAnimation = this._control.animate(
-        [
-          {
-            opacity: 1,
-            easing: 'ease-in'
-          },
-          { opacity: 0 }
-        ],
-        { delay: 1000, duration: 2000 }
-      )
-    }
-
-    this._control.hidden = false
-
-    this._controlAnimation.cancel()
-    if (stop) return
-
-    try {
-      this._controlAnimation.play()
-      await this._controlAnimation.finished
-      this._control.hidden = true
-    } catch (e) {
-      /* cancelled */
-    }
-  }
-
-  _resetTransformTimer() {
-    clearTimeout(this._transferTimer)
-
-    this.playing = true
-
-    if (this._currentPlayer) {
-      this._transferTimer = setTimeout(() => {
-        if (this._transferTimer) this._currentPlayer.next()
-      }, this.playtime * 1000)
-    }
-  }
-
-  onMousemove() {
-    this._resetFadeTimer()
-  }
-
-  onMouseoverControl() {
-    this._resetFadeTimer(true)
-  }
-
-  onTapFullscreen() {
-    togglefullscreen(
-      this,
-      () => {
-        this._fullscreened = true
-        this.focus()
-      },
-      () => {
-        this._fullscreened = false
-        this.focus()
-      }
-    )
-  }
-
-  onTransform() {
-    requestAnimationFrame(() => this.started && this.playing && this._resetTransformTimer())
-  }
-
-  play() {
-    this._resetTransformTimer()
-  }
-
-  pause() {
-    clearTimeout(this._transferTimer)
-    this.playing = false
-  }
-
-  moveLeft() {
-    this._currentPlayer.axis = 'y'
-    this._currentPlayer.previous()
-  }
-
-  moveRight() {
-    this._currentPlayer.axis = 'y'
-    this._currentPlayer.next()
-  }
-
-  moveUp() {
-    this._currentPlayer.axis = 'x'
-    this._currentPlayer.next()
-  }
-
-  moveDown() {
-    this._currentPlayer.axis = 'x'
-    this._currentPlayer.previous()
-  }
-
-  onTapClose() {
-    if (this._fullscreened) {
-      exitfullscreen()
-    }
-
-    window.history.back()
-  }
-
-  async restart() {
-    await this.stop()
-    await this.start()
-  }
-
-  async start() {
-    if (!this.boards || this.boards.length == 0) return
-
-    this.started = true
-    this.playing = true
-
-    await this.updateComplete
-
-    this._currentPlayer = this.renderRoot.querySelector(':not([style*="display: none"])[player]')
-
-    this._resetTransformTimer()
-    this._resetFadeTimer()
-
-    this.focus()
-  }
-
-  async stop() {
-    clearTimeout(this._transferTimer)
-
-    this._currentPlayer && this._currentPlayer.stop()
-    this.started = false
-
-    /**
-     * this.started = false 로 인한 update를 강제하기 위함임.
-     * this.start() 가 바로 호출되어 this.started 의 변화가 render에 반영되지 않을 수 있으므로.
-     */
-    await this.updateComplete
-  }
-}

package/src/ox-board-template-list.ts

@@ -1,267 +0,0 @@
-import '@operato/data-grist'
-import '@operato/input/ox-input-file.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { DataGrist, FetchOption, FilterValue, PaginationConfig, SortersConfig } from '@operato/data-grist'
-import { buildArgs, client } from '@operato/graphql'
-import { ScrollbarStyles } from '@operato/styles'
-import { i18next } from '@operato/i18n'
-
-const FETCH_BOARD_TEMPLATE_LIST_GQL = (listParam: any) => {
-  return gql`
-  {
-    boardTemplates(${buildArgs(listParam)}) {
-      items {
-        id
-        name
-        description
-        visibility
-        thumbnail
-      }
-      total
-    }
-  }
-`
-}
-
-const FETCH_BOARD_TEMPLATE_GQL = (id: string) => {
-  return gql`
-  {
-    boardTemplate(id: "${id}") {
-      id
-      name
-      description
-      visibility
-      model
-      thumbnail
-    }
-  }
-`
-}
-
-@customElement('ox-board-template-list')
-export class OxBoardTemplateList extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-
-        width: 100%;
-      }
-
-      ox-grist {
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      #headroom {
-        align-items: center;
-        padding: var(--padding-default) var(--spacing-large);
-        border-top: 2px solid rgba(0, 0, 0, 0.2);
-        color: var(--md-sys-color-on-surface-variant);
-        background-color: var(--md-sys-color-surface-variant);
-        box-shadow: var(--box-shadow);
-      }
-
-      #filters {
-        display: flex;
-        flex-direction: row;
-        place-content: space-between;
-        margin: var(--margin-default) 0;
-      }
-
-      select {
-        border: 0;
-        outline: none;
-        text-align: right;
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false
-
-  @query('ox-grist') grist!: DataGrist
-
-  render() {
-    return html`
-      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom" id="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>
-          </div>
-        </div>
-      </ox-grist>
-    `
-  }
-
-  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
-    const { items: records, total } = await this.getBoardTemplates({ page, limit, filters, sortings })
-
-    return {
-      total,
-      records
-    }
-  }
-
-  get gristConfig() {
-    const PRIVATE = i18next.t('label.visibility-private')
-    const DOMAIN = i18next.t('label.visibility-domain')
-    const PUBLIC = i18next.t('label.visibility-public')
-
-    const visibilities = window.location.pathname.startsWith('/domain/')
-      ? [
-          { display: PRIVATE, value: 'private' },
-          { display: DOMAIN, value: 'domain' },
-          { display: PUBLIC, value: 'public' }
-        ]
-      : [
-          { display: PRIVATE, value: 'private' },
-          { display: PUBLIC, value: 'public' }
-        ]
-
-    return {
-      list: {
-        thumbnail: 'thumbnail',
-        fields: ['name'],
-        details: ['description']
-      },
-      columns: [
-        {
-          type: 'string',
-          name: 'id',
-          hidden: true
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: 'name',
-          record: {
-            editable: true,
-            align: 'left'
-          },
-          width: 200,
-          filter: 'search',
-          sortable: true
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: 'description',
-          record: {
-            editable: true,
-            align: 'left'
-          },
-          width: 200,
-          filter: 'search'
-        },
-        {
-          type: 'select-buttons',
-          name: 'visibility',
-          header: 'visibility',
-          record: {
-            editable: false
-          },
-          hidden: true,
-          filter: {
-            operator: 'in',
-            options: visibilities,
-            label: ''
-          }
-        },
-        {
-          type: 'image',
-          name: 'thumbnail',
-          hidden: true,
-          record: {
-            editable: false
-          },
-          width: 120
-        }
-      ],
-      rows: {
-        appendable: false,
-        selectable: {
-          multiple: false
-        },
-        handlers: {
-          click: 'select-row-toggle'
-        }
-      },
-      sorters: [
-        {
-          name: 'name',
-          desc: false
-        }
-      ],
-      pagination: {
-        pages: [20, 30, 50, 100, 200]
-      }
-    }
-  }
-
-  async firstUpdated() {
-    this.refreshBoardTemplates()
-  }
-
-  async getSelected() {
-    const selected = this.grist.selected
-    const templateId = selected && selected[0]?.id
-
-    if (!templateId) {
-      return
-    }
-
-    var boardTemplateResponse = await client.query({
-      query: FETCH_BOARD_TEMPLATE_GQL(templateId)
-    })
-
-    var template = boardTemplateResponse.data?.boardTemplate
-
-    if (template) {
-      template = {
-        ...template,
-        model: JSON.parse(template.model)
-      }
-    }
-
-    return template
-  }
-
-  async refreshBoardTemplates() {
-    this.grist.fetch()
-  }
-
-  async getBoardTemplates({
-    page = 1,
-    limit = 30,
-    filters = [],
-    sortings = []
-  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {
-    var pagination: PaginationConfig = {
-      limit,
-      page
-    }
-
-    var params = {
-      filters,
-      sortings,
-      pagination
-    }
-
-    var boardTemplateListResponse = await client.query({
-      query: FETCH_BOARD_TEMPLATE_LIST_GQL(params)
-    })
-
-    return boardTemplateListResponse?.data?.boardTemplates || {}
-  }
-}