npm - @operato/board - Versions diffs - 0.2.15 → 0.2.16 - Mend

@operato/board 0.2.15 → 0.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/src/ox-board-player-control.js DELETED Viewed

@@ -1,390 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/mwc-fab';
-import '@material/mwc-icon';
-import './ox-board-wrapper';
-import './player/board-player-carousel';
-import { LitElement, css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { exitfullscreen, togglefullscreen } from './utils/fullscreen';
-import { SwipeListener } from './utils/swipe-listener';
-let BoardPlayerControl = class BoardPlayerControl extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.boards = [];
-        this.playtime = 30;
-        this.columns = 1;
-        this.rows = 1;
-        this.started = false;
-        this.playing = false;
-        this._fullscreened = false;
-    }
-    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 .sceneId=${item.id} .provider=${this.provider}> </ox-board-wrapper> `)}
-              </ox-board-player-carousel>
-            `
-            : html ``}
-      </slot>
-      <div id="control" @mouseover=${() => this.onMouseoverControl()} hidden>
-        <div id="joystick">
-          <mwc-icon id="up" @click=${() => this.onTapUp()}>keyboard_arrow_up</mwc-icon>
-          <mwc-icon id="left" @click=${() => this.onTapLeft()}>keyboard_arrow_left</mwc-icon>
-          <mwc-icon id="play" @click=${() => this.onTapPlay()} ?hidden=${this.playing}>play_arrow</mwc-icon>
-          <mwc-icon id="pause" @click=${() => this.onTapPause()} ?hidden=${!this.playing}>pause</mwc-icon>
-          <mwc-icon id="right" @click=${() => this.onTapRight()}>keyboard_arrow_right</mwc-icon>
-          <mwc-icon id="down" @click=${() => this.onTapDown()}>keyboard_arrow_down</mwc-icon>
-        </div>
-        <div id="setting-container">
-          <div id="setting">
-            <label id="schedule-container">
-              <mwc-icon id="schedule">schedule</mwc-icon>
-              <input
-                .value=${this.playtime}
-                @change=${(e) => (this.playtime = Number(e.target.value))}
-              />
-              sec.
-            </label>
-            <div id="grid-setting-container">
-              <mwc-icon id="view_module">view_module</mwc-icon>
-              <select
-                .value=${this.rows}
-                @change=${(e) => (this.rows = Number(e.target.value))}
-              >
-                ${[1, 2, 3, 4, 5].map(row => html ` <option>${row}</option> `)}
-              </select>
-              x
-              <select
-                .value=${this.columns}
-                @change=${(e) => (this.columns = Number(e.target.value))}
-              >
-                ${[1, 2, 3, 4, 5].map(column => html ` <option>${column}</option> `)}
-              </select>
-            </div>
-          </div>
-          <div id="etc">
-            <mwc-icon id="fullscreen" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}
-              >fullscreen</mwc-icon
-            >
-            <mwc-icon id="fullscreen-exit" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}
-              >fullscreen_exit</mwc-icon
-            >
-            <mwc-icon id="close" @click=${() => this.onTapClose()}>close</mwc-icon>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    firstUpdated() {
-        SwipeListener(this);
-        this.addEventListener('swipe', (e) => {
-            var directions = e.detail.directions;
-            if (directions.left) {
-                this.onTapRight();
-            }
-            else if (directions.right) {
-                this.onTapLeft();
-            }
-            else if (directions.top) {
-                this.onTapDown();
-            }
-            else if (directions.bottom) {
-                this.onTapUp();
-            }
-        });
-    }
-    updated(changes) {
-        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) {
-        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());
-    }
-    onTapPlay() {
-        this._resetTransformTimer();
-    }
-    onTapPause() {
-        clearTimeout(this._transferTimer);
-        this.playing = false;
-    }
-    onTapLeft() {
-        this._currentPlayer.axis = 'y';
-        this._currentPlayer.previous();
-    }
-    onTapRight() {
-        this._currentPlayer.axis = 'y';
-        this._currentPlayer.next();
-    }
-    onTapUp() {
-        this._currentPlayer.axis = 'x';
-        this._currentPlayer.next();
-    }
-    onTapDown() {
-        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;
-    }
-};
-BoardPlayerControl.styles = css `
-    div > * {
-      cursor: pointer;
-      user-select: none;
-    }
-    #joystick {
-      position: relative;
-      box-sizing: border-box;
-      border: 2px solid tomato;
-      background-color: #c34827;
-      box-shadow: 0 0 5px #000;
-      width: 100%;
-      height: 100%;
-      grid-column: 1 / span 2;
-      border-radius: 50%;
-      z-index: 2;
-      grid-row: 1 / span 3;
-    }
-    #joystick mwc-icon {
-      position: absolute;
-      display: block;
-      width: 20px;
-      height: 20px;
-      font-size: 25px;
-      line-height: 0.7;
-    }
-    mwc-icon#up {
-      left: 29px;
-    }
-    mwc-icon#left {
-      top: 32px;
-      left: -2px;
-    }
-    mwc-icon#play,
-    mwc-icon#pause {
-      left: 20px;
-      top: 20px;
-      width: 40px;
-      height: 40px;
-      border: 1px solid rgba(0, 0, 0, 0.15);
-      border-radius: 50%;
-      background-color: rgba(0, 0, 0, 0.15);
-      font-size: 45px;
-      line-height: 0.9;
-    }
-    mwc-icon#right {
-      top: 31px;
-      left: 60px;
-    }
-    mwc-icon#down {
-      left: 29px;
-      top: 63px;
-    }
-    mwc-icon#pause {
-      text-indent: -2px;
-    }
-    #setting-container {
-      grid-column: 2 / span 2;
-      grid-row: 2;
-      gap: 0 10px;
-      border-radius: 12px;
-      background: rgba(0, 0, 0, 0.7);
-      height: 100%;
-      box-shadow: rgb(0, 0, 0) 0px 0px 5px;
-      display: grid;
-      grid-template-columns: 1fr 60px;
-      align-items: center;
-      padding-left: 60px;
-      padding-right: 5px;
-    }
-    #setting {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-gap: 0 10px;
-    }
-    #setting mwc-icon {
-      font-size: 22px;
-      color: rgba(255, 174, 53, 0.8);
-    }
-    #setting input {
-      width: 50px;
-      margin-right: 5px;
-      font-size: 14px;
-      background-color: transparent;
-      border: none;
-      border-bottom: 1px solid #fff;
-      color: #fff;
-      text-align: right;
-    }
-    #setting select {
-      border: none;
-      font-size: 14px;
-    }
-    #setting input:focus {
-      outline: none;
-    }
-    #schedule-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    #grid-setting-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    #etc {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      align-items: center;
-      justify-items: center;
-    }
-    #etc mwc-icon {
-      font-size: 30px;
-    }
-  `;
-__decorate([
-    property({ type: Array })
-], BoardPlayerControl.prototype, "boards", void 0);
-__decorate([
-    property({ type: Number })
-], BoardPlayerControl.prototype, "playtime", void 0);
-__decorate([
-    property({ type: Number })
-], BoardPlayerControl.prototype, "columns", void 0);
-__decorate([
-    property({ type: Number })
-], BoardPlayerControl.prototype, "rows", void 0);
-__decorate([
-    property({ type: Boolean })
-], BoardPlayerControl.prototype, "started", void 0);
-__decorate([
-    property({ type: Boolean })
-], BoardPlayerControl.prototype, "playing", void 0);
-__decorate([
-    property({ type: Object })
-], BoardPlayerControl.prototype, "provider", void 0);
-__decorate([
-    state()
-], BoardPlayerControl.prototype, "_controlAnimation", void 0);
-__decorate([
-    state()
-], BoardPlayerControl.prototype, "_transferTimer", void 0);
-__decorate([
-    state()
-], BoardPlayerControl.prototype, "_currentPlayer", void 0);
-__decorate([
-    state()
-], BoardPlayerControl.prototype, "_fullscreened", void 0);
-__decorate([
-    query('#control')
-], BoardPlayerControl.prototype, "_control", void 0);
-BoardPlayerControl = __decorate([
-    customElement('ox-board-player-control')
-], BoardPlayerControl);
-export { BoardPlayerControl };
-//# sourceMappingURL=ox-board-player-control.js.map

package/dist/src/ox-board-player-control.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ox-board-player-control.js","sourceRoot":"","sources":["../../src/ox-board-player-control.ts"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAItD,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,UAAU;IAAlD;;QAwI6B,WAAM,GAAe,EAAE,CAAA;QACtB,aAAQ,GAAG,EAAE,CAAA;QACb,YAAO,GAAG,CAAC,CAAA;QACX,SAAI,GAAG,CAAC,CAAA;QACP,YAAO,GAAG,KAAK,CAAA;QACf,YAAO,GAAG,KAAK,CAAA;QAMnC,kBAAa,GAAG,KAAK,CAAA;IAyOhC,CAAC;IArOC,MAAM;QACJ,OAAO,IAAI,CAAA;yBACU,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,eAAe,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;UAC9E,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;yDACyC,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,OAAO;kBACzE,IAAI,CAAC,MAAM,CAAC,GAAG,CACf,IAAI,CAAC,EAAE,CACL,IAAI,CAAA,oCAAoC,IAAI,CAAC,EAAE,cAAc,IAAI,CAAC,QAAQ,wBAAwB,CACrG;;aAEJ;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;qCAGmB,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;;qCAE/B,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;uCAClB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;uCACtB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,IAAI,CAAC,OAAO;wCAC7C,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO;wCAChD,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;uCACxB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;;;;;;;;yBAQpC,IAAI,CAAC,QAAQ;0BACZ,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;;;;;;;yBAO7E,IAAI,CAAC,IAAI;0BACR,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;;kBAEhF,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,YAAY,GAAG,YAAY,CAAC;;;;yBAIpD,IAAI,CAAC,OAAO;0BACX,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;;kBAEnF,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,YAAY,MAAM,YAAY,CAAC;;;;;;+CAMpC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,YAAY,IAAI,CAAC,aAAa;;;oDAGrD,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,IAAI,CAAC,aAAa;;;0CAGrE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;;KAI5D,CAAA;IACH,CAAC;IAED,YAAY;QACV,aAAa,CAAC,IAAI,CAAC,CAAA;QAEnB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC1C,IAAI,UAAU,GAAI,CAAS,CAAC,MAAM,CAAC,UAAU,CAAA;YAE7C,IAAI,UAAU,CAAC,IAAI,EAAE;gBACnB,IAAI,CAAC,UAAU,EAAE,CAAA;aAClB;iBAAM,IAAI,UAAU,CAAC,KAAK,EAAE;gBAC3B,IAAI,CAAC,SAAS,EAAE,CAAA;aACjB;iBAAM,IAAI,UAAU,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,SAAS,EAAE,CAAA;aACjB;iBAAM,IAAI,UAAU,CAAC,MAAM,EAAE;gBAC5B,IAAI,CAAC,OAAO,EAAE,CAAA;aACf;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC1E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;SACrE;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;YAClD,IAAI,CAAC,oBAAoB,EAAE,CAAA;SAC5B;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,IAAc;QAClC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAC5C;gBACE;oBACE,OAAO,EAAE,CAAC;oBACV,MAAM,EAAE,SAAS;iBAClB;gBACD,EAAE,OAAO,EAAE,CAAC,EAAE;aACf,EACD,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAChC,CAAA;SACF;QAED,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAA;QAE5B,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAA;QAC/B,IAAI,IAAI;YAAE,OAAM;QAEhB,IAAI;YACF,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAA;YAC7B,MAAM,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAA;YACrC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAA;SAC5B;QAAC,OAAO,CAAC,EAAE;YACV,eAAe;SAChB;IACH,CAAC;IAED,oBAAoB;QAClB,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAEjC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QAEnB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE;gBACpC,IAAI,IAAI,CAAC,cAAc;oBAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;YACrD,CAAC,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;SACzB;IACH,CAAC;IAED,WAAW;QACT,IAAI,CAAC,eAAe,EAAE,CAAA;IACxB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC;IAED,eAAe;QACb,gBAAgB,CACd,IAAI,EACJ,GAAG,EAAE;YACH,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YACzB,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,EACD,GAAG,EAAE;YACH,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;YAC1B,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CACF,CAAA;IACH,CAAC;IAED,WAAW;QACT,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAA;IAC1F,CAAC;IAED,SAAS;QACP,IAAI,CAAC,oBAAoB,EAAE,CAAA;IAC7B,CAAC;IAED,UAAU;QACR,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QACjC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACtB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,GAAG,CAAA;QAC9B,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAA;IAChC,CAAC;IAED,UAAU;QACR,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,GAAG,CAAA;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAED,OAAO;QACL,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,GAAG,CAAA;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAED,SAAS;QACP,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,GAAG,CAAA;QAC9B,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAA;IAChC,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,cAAc,EAAE,CAAA;SACjB;QAED,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAED,KAAK,CAAC,OAAO;QACX,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;QACjB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;IACpB,CAAC;IAED,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC;YAAE,OAAM;QAEnD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QAEnB,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,wCAAwC,CAAC,CAAA;QAE7F,IAAI,CAAC,oBAAoB,EAAE,CAAA;QAC3B,IAAI,CAAC,eAAe,EAAE,CAAA;QAEtB,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,KAAK,CAAC,IAAI;QACR,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAEjC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;QACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QAEpB;;;WAGG;QACH,MAAM,IAAI,CAAC,cAAc,CAAA;IAC3B,CAAC;CACF,CAAA;AA3XQ,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqIlB,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAwB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAS;AACP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAgB;AACf;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAgB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAc;AAEhC;IAAR,KAAK,EAAE;6DAA8B;AAC7B;IAAR,KAAK,EAAE;0DAAqB;AACpB;IAAR,KAAK,EAAE;0DAAqB;AACpB;IAAR,KAAK,EAAE;yDAAsB;AAEX;IAAlB,KAAK,CAAC,UAAU,CAAC;oDAAuB;AArJ9B,kBAAkB;IAD9B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,kBAAkB,CA4X9B;SA5XY,kBAAkB","sourcesContent":["import '@material/mwc-fab'\nimport '@material/mwc-icon'\nimport './ox-board-wrapper'\nimport './player/board-player-carousel'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { exitfullscreen, togglefullscreen } from './utils/fullscreen'\n\nimport { SwipeListener } from './utils/swipe-listener'\nimport { style } from './ox-board-player-style'\n\n@customElement('ox-board-player-control')\nexport class BoardPlayerControl extends LitElement {\n static styles = css`\n div > * {\n cursor: pointer;\n user-select: none;\n }\n\n #joystick {\n position: relative;\n box-sizing: border-box;\n border: 2px solid tomato;\n background-color: #c34827;\n box-shadow: 0 0 5px #000;\n width: 100%;\n height: 100%;\n grid-column: 1 / span 2;\n border-radius: 50%;\n z-index: 2;\n grid-row: 1 / span 3;\n }\n\n #joystick mwc-icon {\n position: absolute;\n display: block;\n width: 20px;\n height: 20px;\n font-size: 25px;\n line-height: 0.7;\n }\n\n mwc-icon#up {\n left: 29px;\n }\n\n mwc-icon#left {\n top: 32px;\n left: -2px;\n }\n\n mwc-icon#play,\n mwc-icon#pause {\n left: 20px;\n top: 20px;\n width: 40px;\n height: 40px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.15);\n font-size: 45px;\n line-height: 0.9;\n }\n\n mwc-icon#right {\n top: 31px;\n left: 60px;\n }\n\n mwc-icon#down {\n left: 29px;\n top: 63px;\n }\n\n mwc-icon#pause {\n text-indent: -2px;\n }\n\n #setting-container {\n grid-column: 2 / span 2;\n grid-row: 2;\n gap: 0 10px;\n border-radius: 12px;\n background: rgba(0, 0, 0, 0.7);\n height: 100%;\n box-shadow: rgb(0, 0, 0) 0px 0px 5px;\n display: grid;\n grid-template-columns: 1fr 60px;\n align-items: center;\n padding-left: 60px;\n padding-right: 5px;\n }\n\n #setting {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 0 10px;\n }\n\n #setting mwc-icon {\n font-size: 22px;\n color: rgba(255, 174, 53, 0.8);\n }\n\n #setting input {\n width: 50px;\n margin-right: 5px;\n font-size: 14px;\n background-color: transparent;\n border: none;\n border-bottom: 1px solid #fff;\n color: #fff;\n text-align: right;\n }\n\n #setting select {\n border: none;\n font-size: 14px;\n }\n\n #setting input:focus {\n outline: none;\n }\n\n #schedule-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n #grid-setting-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n #etc {\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n justify-items: center;\n }\n\n #etc mwc-icon {\n font-size: 30px;\n }\n `\n\n @property({ type: Array }) boards: Array<any> = []\n @property({ type: Number }) playtime = 30\n @property({ type: Number }) columns = 1\n @property({ type: Number }) rows = 1\n @property({ type: Boolean }) started = false\n @property({ type: Boolean }) playing = false\n @property({ type: Object }) provider: any\n\n @state() _controlAnimation?: Animation\n @state() _transferTimer?: any\n @state() _currentPlayer?: any\n @state() _fullscreened = false\n\n @query('#control') _control!: HTMLElement\n\n render() {\n return html`\n <slot @mousemove=${() => this.onMousemove()} @transform=${() => this.onTransform()} tabindex=\"-1\">\n ${this.started\n ? html`\n <ox-board-player-carousel axis=\"y\" .rows=${this.rows} .columns=${this.columns} player>\n ${this.boards.map(\n item =>\n html` <ox-board-wrapper page .sceneId=${item.id} .provider=${this.provider}> </ox-board-wrapper> `\n )}\n </ox-board-player-carousel>\n `\n : html``}\n </slot>\n\n <div id=\"control\" @mouseover=${() => this.onMouseoverControl()} hidden>\n <div id=\"joystick\">\n <mwc-icon id=\"up\" @click=${() => this.onTapUp()}>keyboard_arrow_up</mwc-icon>\n <mwc-icon id=\"left\" @click=${() => this.onTapLeft()}>keyboard_arrow_left</mwc-icon>\n <mwc-icon id=\"play\" @click=${() => this.onTapPlay()} ?hidden=${this.playing}>play_arrow</mwc-icon>\n <mwc-icon id=\"pause\" @click=${() => this.onTapPause()} ?hidden=${!this.playing}>pause</mwc-icon>\n <mwc-icon id=\"right\" @click=${() => this.onTapRight()}>keyboard_arrow_right</mwc-icon>\n <mwc-icon id=\"down\" @click=${() => this.onTapDown()}>keyboard_arrow_down</mwc-icon>\n </div>\n\n <div id=\"setting-container\">\n <div id=\"setting\">\n <label id=\"schedule-container\">\n <mwc-icon id=\"schedule\">schedule</mwc-icon>\n <input\n .value=${this.playtime}\n @change=${(e: Event) => (this.playtime = Number((e.target as HTMLInputElement).value))}\n />\n sec.\n </label>\n <div id=\"grid-setting-container\">\n <mwc-icon id=\"view_module\">view_module</mwc-icon>\n <select\n .value=${this.rows}\n @change=${(e: Event) => (this.rows = Number((e.target as HTMLInputElement).value))}\n >\n ${[1, 2, 3, 4, 5].map(row => html` <option>${row}</option> `)}\n </select>\n x\n <select\n .value=${this.columns}\n @change=${(e: Event) => (this.columns = Number((e.target as HTMLInputElement).value))}\n >\n ${[1, 2, 3, 4, 5].map(column => html` <option>${column}</option> `)}\n </select>\n </div>\n </div>\n\n <div id=\"etc\">\n <mwc-icon id=\"fullscreen\" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}\n >fullscreen</mwc-icon\n >\n <mwc-icon id=\"fullscreen-exit\" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}\n >fullscreen_exit</mwc-icon\n >\n <mwc-icon id=\"close\" @click=${() => this.onTapClose()}>close</mwc-icon>\n </div>\n </div>\n </div>\n `\n }\n\n firstUpdated() {\n SwipeListener(this)\n\n this.addEventListener('swipe', (e: Event) => {\n var directions = (e as any).detail.directions\n\n if (directions.left) {\n this.onTapRight()\n } else if (directions.right) {\n this.onTapLeft()\n } else if (directions.top) {\n this.onTapDown()\n } else if (directions.bottom) {\n this.onTapUp()\n }\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('boards') || changes.has('columns') || changes.has('rows')) {\n this.boards && this.boards.length > 0 ? this.restart() : this.stop()\n } else if (changes.has('playtime') && this.playing) {\n this._resetTransformTimer()\n }\n }\n\n async _resetFadeTimer(stop?: boolean) {\n if (!this._controlAnimation) {\n this._controlAnimation = this._control.animate(\n [\n {\n opacity: 1,\n easing: 'ease-in'\n },\n { opacity: 0 }\n ],\n { delay: 1000, duration: 2000 }\n )\n }\n\n this._control.hidden = false\n\n this._controlAnimation.cancel()\n if (stop) return\n\n try {\n this._controlAnimation.play()\n await this._controlAnimation.finished\n this._control.hidden = true\n } catch (e) {\n /* cancelled */\n }\n }\n\n _resetTransformTimer() {\n clearTimeout(this._transferTimer)\n\n this.playing = true\n\n if (this._currentPlayer) {\n this._transferTimer = setTimeout(() => {\n if (this._transferTimer) this._currentPlayer.next()\n }, this.playtime * 1000)\n }\n }\n\n onMousemove() {\n this._resetFadeTimer()\n }\n\n onMouseoverControl() {\n this._resetFadeTimer(true)\n }\n\n onTapFullscreen() {\n togglefullscreen(\n this,\n () => {\n this._fullscreened = true\n this.focus()\n },\n () => {\n this._fullscreened = false\n this.focus()\n }\n )\n }\n\n onTransform() {\n requestAnimationFrame(() => this.started && this.playing && this._resetTransformTimer())\n }\n\n onTapPlay() {\n this._resetTransformTimer()\n }\n\n onTapPause() {\n clearTimeout(this._transferTimer)\n this.playing = false\n }\n\n onTapLeft() {\n this._currentPlayer.axis = 'y'\n this._currentPlayer.previous()\n }\n\n onTapRight() {\n this._currentPlayer.axis = 'y'\n this._currentPlayer.next()\n }\n\n onTapUp() {\n this._currentPlayer.axis = 'x'\n this._currentPlayer.next()\n }\n\n onTapDown() {\n this._currentPlayer.axis = 'x'\n this._currentPlayer.previous()\n }\n\n onTapClose() {\n if (this._fullscreened) {\n exitfullscreen()\n }\n\n window.history.back()\n }\n\n async restart() {\n await this.stop()\n await this.start()\n }\n\n async start() {\n if (!this.boards || this.boards.length == 0) return\n\n this.started = true\n this.playing = true\n\n await this.updateComplete\n\n this._currentPlayer = this.renderRoot.querySelector(':not([style*=\"display: none\"])[player]')\n\n this._resetTransformTimer()\n this._resetFadeTimer()\n\n this.focus()\n }\n\n async stop() {\n clearTimeout(this._transferTimer)\n\n this._currentPlayer && this._currentPlayer.stop()\n this.started = false\n\n /**\n * this.started = false 로 인한 update를 강제하기 위함임.\n * this.start() 가 바로 호출되어 this.started 의 변화가 render에 반영되지 않을 수 있으므로.\n */\n await this.updateComplete\n }\n}\n"]}

package/dist/src/ox-board-wrapper.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ox-board-wrapper.js","sourceRoot":"","sources":["../../src/ox-board-wrapper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE;;;;GAIG;AAEH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAuBnC,MAAM;QACJ,OAAO,IAAI,CAAA,2BAA2B,CAAA;IACxC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,IAAI,CAAC,MAAM,EAAE;oBACf,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAA;oBAEpB,IAAI,IAAI,CAAC,WAAW,EAAE;wBACpB,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAA;qBAClB;iBACF;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACpD,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAA;YACzB,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAA;YACrB,OAAO,IAAI,CAAC,MAAM,CAAA;SACnB;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAM;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAA;QAElB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,IAAI,CACxC,CAAC,KAAU,EAAE,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;YACnB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAA;YAEnC;;;eAGG;YACH,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;gBAClC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAA;aAClB;QACH,CAAC,EACD,CAAC,CAAM,EAAE,EAAE,GAAE,CAAC,CACf,CAAA;IACH,CAAC;CACF,CAAA;AAlFQ,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AAEjC;IAAR,KAAK,EAAE;4CAAY;AAEF;IAAjB,KAAK,CAAC,SAAS,CAAC;+CAAwB;AArBrC,YAAY;IADjB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,YAAY,CAmFjB","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n/**\n * @class BoardWrapper\n *\n * @description scene provider로부터 제공받은 scene의 reference count control을 담당하며, resize 이벤트 발생시 scene의 사이즈를 fit 시키는 역할을 담당한다.\n */\n@customElement('ox-board-wrapper')\nclass BoardWrapper extends LitElement {\n static styles = [\n css`\n :host {\n position: relative;\n }\n\n #target {\n display: block;\n width: 100%;\n height: 100%;\n outline: 0;\n }\n `\n ]\n\n @property({ type: String }) sceneId!: string\n @property({ type: Object }) provider!: any\n\n @state() _scene: any\n\n @query('#target') _targetEl!: HTMLElement\n\n render() {\n return html` <div id=\"target\"></div> `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n window.addEventListener('resize', () => {\n requestAnimationFrame(() => {\n if (this._scene) {\n this._scene.resize()\n\n if (this.offsetWidth) {\n this._scene.fit()\n }\n }\n })\n })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this._releaseRef()\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('sceneId') && this._onSceneIdChanged()\n }\n\n _releaseRef() {\n if (this._scene) {\n this._scene.target = null\n this._scene.release()\n delete this._scene\n }\n }\n\n _onSceneIdChanged() {\n if (!this.provider) return\n this._releaseRef()\n\n if (!this.sceneId) return\n\n this.provider.get(this.sceneId, true).then(\n (scene: any) => {\n this._scene = scene\n this._scene.target = this._targetEl\n\n /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.\n * 이 때는 정상적으로 그려주고,\n * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.\n */\n if (this._scene.target.offsetWidth) {\n this._scene.fit()\n }\n },\n (e: any) => {}\n )\n }\n}\n"]}

package/dist/src/player/board-player-carousel.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- import './board-player-grid';

package/dist/src/player/board-player-carousel.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"board-player-carousel.js","sourceRoot":"","sources":["../../../src/player/board-player-carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import './board-player-grid'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n@customElement('ox-board-player-carousel')\nclass BoardPlayerCarousel extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n margin: 0 auto 0px;\n -webkit-perspective: 1200px;\n -moz-perspective: 1200px;\n -o-perspective: 1200px;\n perspective: 1200px;\n }\n\n #carousel {\n width: 100%;\n height: 100%;\n margin: 0px auto 0px;\n\n position: absolute;\n -webkit-transform-style: preserve-3d;\n -moz-transform-style: preserve-3d;\n -o-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: -webkit-transform 1.5s;\n -moz-transition: -moz-transform 1.5s;\n -o-transition: -o-transform 1.5s;\n transition: transform 1.5s;\n }\n\n #carousel > * {\n position: absolute;\n width: 100%;\n height: 100%;\n font-weight: bold;\n -webkit-transition: opacity 1.5s, -webkit-transform 1.5s;\n -moz-transition: opacity 1.5s, -moz-transform 1.5s;\n -o-transition: opacity 1.5s, -o-transform 1.5s;\n transition: opacity 1.5s, transform 1.5s;\n\n -webkit-backface-visibility: hidden;\n -moz-backface-visibility: hidden;\n -o-backface-visibility: hidden;\n backface-visibility: hidden;\n }\n `\n ]\n\n @property({ type: String }) axis: string = 'y'\n @property({ type: Number }) rows: number = 1\n @property({ type: Number }) columns: number = 1\n\n @state() _slotObserver?: MutationObserver\n @state() _boundResize?: () => void\n @state() _rotation: number = 0\n @state() _theta: number = 0\n @state() _radius: number = 0\n @state() _rotateFn?: string\n\n @state() _panelCount: number = 0\n @state() _panelSize: number = 0\n @state() _isHorizontal: boolean = true\n\n @query('#slot') _slot!: HTMLSlotElement\n @query('#carousel') _carousel!: HTMLElement\n\n render() {\n return html`\n <slot id=\"slot\" select=\"[page]\"></slot>\n\n <div id=\"carousel\"></div>\n `\n }\n\n async connectedCallback() {\n await super.connectedCallback()\n\n this._boundResize = this.build.bind(this)\n window.addEventListener('resize', this._boundResize)\n\n this._slotObserver = new MutationObserver(mutations => {\n this.build()\n })\n\n await this.updateComplete\n\n this._slotObserver?.observe(this._slot, { childList: true })\n this.build()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this._slotObserver?.disconnect()\n delete this._slotObserver\n\n if (this._boundResize) {\n window.removeEventListener('resize', this._boundResize)\n delete this._boundResize\n }\n }\n\n firstUpdated() {\n this._rotation = 0\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('axis') && this._onAxisChanged()\n }\n\n build() {\n var pages = Array.from(this.querySelectorAll('[page]'))\n var panel = Array.from(this._carousel.querySelectorAll('ox-board-player-grid')).pop()\n\n var rows = this.rows || 1\n var columns = this.columns || 1\n\n var i = panel ? panel.querySelectorAll('[page]').length : 0\n var page = pages.shift()\n\n while (page) {\n if (!(i++ % (rows * columns))) {\n panel = document.createElement('ox-board-player-grid')\n ;(panel as any).rows = rows\n ;(panel as any).columns = columns\n\n this._carousel.appendChild(panel)\n }\n panel?.appendChild(page)\n\n page = pages.shift()\n }\n\n this.start()\n }\n\n start() {\n var panels = this._carousel.querySelectorAll('ox-board-player-grid')\n\n this._isHorizontal = this.axis === 'y'\n\n this._panelCount = panels.length\n\n this._panelSize = this._carousel[this._isHorizontal ? 'offsetWidth' : 'offsetHeight'] || 640\n this._rotateFn = this._isHorizontal ? 'rotateY' : 'rotateX'\n this._theta = 360 / (this._panelCount || 1)\n\n // do some trig to figure out how big the carousel is in 3D space\n this._radius = Math.round(this._panelSize / 2 / Math.tan(Math.PI / (this._panelCount < 2 ? 2 : this._panelCount)))\n\n for (let i = 0; i < this._panelCount; i++) {\n let panel = panels[i] as HTMLElement\n let angle = this._theta * i\n panel.style.opacity = '1'\n\n panel.style.backgroundColor = 'white'\n\n panel.style.transform = this._rotateFn + '(' + angle + 'deg) translateZ(' + this._radius + 'px)'\n }\n\n // adjust rotation so panels are always flat\n this._rotation = Math.round(this._rotation / this._theta) * this._theta\n this._transform()\n }\n\n stop() {\n this._carousel.innerHTML = ''\n }\n\n _onAxisChanged() {\n this.start()\n }\n\n _transform() {\n // push the carousel back in 3D space, and rotate it\n this._carousel.style.transform =\n 'translateZ(-' + this._radius + 'px) ' + this._rotateFn + '(' + this._rotation + 'deg)'\n this.dispatchEvent(new CustomEvent('transform', { bubbles: true, composed: true }))\n }\n\n previous() {\n this._rotation += this._theta\n this._transform()\n }\n\n next() {\n this._rotation -= this._theta\n this._transform()\n }\n}\n"]}

package/dist/src/player/board-player-grid.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"board-player-grid.js","sourceRoot":"","sources":["../../../src/player/board-player-grid.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE;;;;;;;;;GASG;AAGH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAe8B,SAAI,GAAW,CAAC,CAAA;QAChB,YAAO,GAAW,CAAC,CAAA;IA8CjD,CAAC;IAxCC,MAAM;QACJ,OAAO,IAAI,CAAA,2CAA2C,CAAA;IACxD,CAAC;IAED,KAAK,CAAC,iBAAiB;;QACrB,MAAM,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAE/B,IAAI,CAAC,aAAa,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YACpD,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAA;YAC/B,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAExB;YAAC,IAAI,CAAC,KAAa,CAAC,uBAAuB,CAAC,GAAG,UAAU,OAAO,QAAQ,CACxE;YAAC,IAAI,CAAC,KAAa,CAAC,oBAAoB,CAAC,GAAG,UAAU,IAAI,QAAQ,CAAA;QACrE,CAAC,CAAC,CAAA;QAEF,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAA;QAC/B,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAExB;QAAC,IAAI,CAAC,KAAa,CAAC,uBAAuB,CAAC,GAAG,UAAU,OAAO,QAAQ,CACxE;QAAC,IAAI,CAAC,KAAa,CAAC,oBAAoB,CAAC,GAAG,UAAU,IAAI,QAAQ,CAAA;QAEnE,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;IAC9D,CAAC;IAED,oBAAoB;;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,EAAE,CAAA;QAChC,OAAO,IAAI,CAAC,aAAa,CAAA;IAC3B,CAAC;IAED,KAAK,KAAI,CAAC;IAEV,IAAI,KAAI,CAAC;IAET,IAAI,KAAI,CAAC;IAET,QAAQ,KAAI,CAAC;CACd,CAAA;AA7DQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;KAUF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAoB;AAEtC;IAAR,KAAK,EAAE;sDAAiC;AAEzB;IAAf,KAAK,CAAC,OAAO,CAAC;8CAAwB;AApBnC,eAAe;IADpB,aAAa,CAAC,sBAAsB,CAAC;GAChC,eAAe,CA8DpB","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n/**\n * 자식 컴포넌트들을 그리드형태로 화면에 배치하여 한꺼번에 디스플레이해주는 컴포넌트.\n * Example:\n <ox-board-player-grid rows=\"3\" columns=\"3\" tabindex=\"0\" focus>\n <div page>A</div>\n <div page>B</div>\n <div page>C</div>\n <div page>D</div>\n </ox-board-player-grid>\n */\n\n@customElement('ox-board-player-grid')\nclass BoardPlayerGrid extends LitElement {\n static styles = [\n css`\n :host {\n width: 100%;\n height: 100%;\n position: relative;\n\n display: grid;\n grid-gap: 0px;\n grid-auto-flow: dense;\n }\n `\n ]\n\n @property({ type: Number }) rows: number = 1\n @property({ type: Number }) columns: number = 1\n\n @state() _slotObserver?: MutationObserver\n\n @query('#slot') _slot!: HTMLSlotElement\n\n render() {\n return html` <slot id=\"slot\" select=\"[page]\"></slot> `\n }\n\n async connectedCallback() {\n await super.connectedCallback()\n\n this._slotObserver = new MutationObserver(mutations => {\n var columns = this.columns || 1\n var rows = this.rows || 1\n\n ;(this.style as any)['grid-template-columns'] = `repeat(${columns}, 1fr)`\n ;(this.style as any)['grid-template-rows'] = `repeat(${rows}, 1fr)`\n })\n\n await this.updateComplete\n\n var columns = this.columns || 1\n var rows = this.rows || 1\n\n ;(this.style as any)['grid-template-columns'] = `repeat(${columns}, 1fr)`\n ;(this.style as any)['grid-template-rows'] = `repeat(${rows}, 1fr)`\n\n this._slotObserver?.observe(this._slot, { childList: true })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this._slotObserver?.disconnect()\n delete this._slotObserver\n }\n\n start() {}\n\n stop() {}\n\n next() {}\n\n previous() {}\n}\n"]}