@operato/board 0.2.15

package/dist/src/player/board-player-carousel.js

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

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/player/board-player-grid.js

@@ -0,0 +1,78 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+/**
+ * 자식 컴포넌트들을 그리드형태로 화면에 배치하여 한꺼번에 디스플레이해주는 컴포넌트.
+ * Example:
+    <ox-board-player-grid rows="3" columns="3" tabindex="0" focus>
+      <div page>A</div>
+      <div page>B</div>
+      <div page>C</div>
+      <div page>D</div>
+    </ox-board-player-grid>
+ */
+let BoardPlayerGrid = class BoardPlayerGrid extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.rows = 1;
+        this.columns = 1;
+    }
+    render() {
+        return html ` <slot id="slot" select="[page]"></slot> `;
+    }
+    async connectedCallback() {
+        var _a;
+        await super.connectedCallback();
+        this._slotObserver = new MutationObserver(mutations => {
+            var columns = this.columns || 1;
+            var rows = this.rows || 1;
+            this.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
+            this.style['grid-template-rows'] = `repeat(${rows}, 1fr)`;
+        });
+        await this.updateComplete;
+        var columns = this.columns || 1;
+        var rows = this.rows || 1;
+        this.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
+        this.style['grid-template-rows'] = `repeat(${rows}, 1fr)`;
+        (_a = this._slotObserver) === null || _a === void 0 ? void 0 : _a.observe(this._slot, { childList: true });
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this._slotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this._slotObserver;
+    }
+    start() { }
+    stop() { }
+    next() { }
+    previous() { }
+};
+BoardPlayerGrid.styles = [
+    css `
+      :host {
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        display: grid;
+        grid-gap: 0px;
+        grid-auto-flow: dense;
+      }
+    `
+];
+__decorate([
+    property({ type: Number })
+], BoardPlayerGrid.prototype, "rows", void 0);
+__decorate([
+    property({ type: Number })
+], BoardPlayerGrid.prototype, "columns", void 0);
+__decorate([
+    state()
+], BoardPlayerGrid.prototype, "_slotObserver", void 0);
+__decorate([
+    query('#slot')
+], BoardPlayerGrid.prototype, "_slot", void 0);
+BoardPlayerGrid = __decorate([
+    customElement('ox-board-player-grid')
+], BoardPlayerGrid);
+//# sourceMappingURL=board-player-grid.js.map

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

@@ -0,0 +1 @@
+{"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"]}

package/dist/src/utils/fullscreen.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 풀스크린 전환 이후와 풀스크린 해제 이후에 호출되는 콜백함수
+ * @callback FullscreenCallback
+ */
+export declare type FullscreenCallback = () => void;
+/**
+ * 엘리먼트를 풀스크린으로 표시되도록 한다.
+ * @param {HTMLElement} element 대상 엘리먼트
+ * @param {FullscreenCallback} afterfull 풀스크린이 된 이후에 호출되는 콜백함수
+ * @param {FullscreenCallback} afterfinish 풀스크린이 해제된 이후에 호출되는 콜백함수
+ */
+export declare function fullscreen(element: HTMLElement, afterfull?: FullscreenCallback, afterfinish?: FullscreenCallback): void;
+export declare function exitfullscreen(): void;
+export declare function togglefullscreen(element: HTMLElement, afterfull?: FullscreenCallback, afterfinish?: FullscreenCallback): void;

package/dist/src/utils/fullscreen.js

@@ -0,0 +1,69 @@
+/**
+ * 엘리먼트를 풀스크린으로 표시되도록 한다.
+ * @param {HTMLElement} element 대상 엘리먼트
+ * @param {FullscreenCallback} afterfull 풀스크린이 된 이후에 호출되는 콜백함수
+ * @param {FullscreenCallback} afterfinish 풀스크린이 해제된 이후에 호출되는 콜백함수
+ */
+export function fullscreen(element, afterfull, afterfinish) {
+    var org_width = element.style.width;
+    var org_height = element.style.height;
+    function _fullscreen_callback(e) {
+        if (!document.fullscreenElement &&
+            //@ts-ignore
+            !document.mozFullScreen &&
+            //@ts-ignore
+            !document.webkitIsFullScreen &&
+            //@ts-ignore
+            !document.msFullscreenElement) {
+            ;
+            ['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event => document.removeEventListener(event, _fullscreen_callback));
+            element.style.width = org_width;
+            element.style.height = org_height;
+            afterfinish && afterfinish();
+        }
+        else {
+            element.style.width = '100%';
+            element.style.height = '100%';
+            afterfull && afterfull();
+        }
+    }
+    ;
+    ['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event => document.addEventListener(event, _fullscreen_callback));
+    if (element.requestFullscreen)
+        element.requestFullscreen();
+    //@ts-ignore
+    else if (element.webkitRequestFullScreen)
+        element.webkitRequestFullScreen();
+    //@ts-ignore
+    else if (element.mozRequestFullScreen)
+        element.mozRequestFullScreen();
+    //@ts-ignore
+    else if (element.msRequestFullscreen)
+        element.msRequestFullscreen();
+}
+export function exitfullscreen() {
+    if (document.exitFullscreen)
+        document.exitFullscreen();
+    //@ts-ignore
+    else if (document.mozCancelFullScreen)
+        document.mozCancelFullScreen();
+    //@ts-ignore
+    else if (document.webkitCancelFullScreen)
+        document.webkitCancelFullScreen();
+    //@ts-ignore
+    else if (document.msExitFullscreen)
+        document.msExitFullscreen();
+}
+export function togglefullscreen(element, afterfull, afterfinish) {
+    if (!document.fullscreenElement &&
+        //@ts-ignore
+        !document.mozFullScreen &&
+        //@ts-ignore
+        !document.webkitIsFullScreen &&
+        //@ts-ignore
+        !document.msFullscreenElement)
+        fullscreen(element, afterfull, afterfinish);
+    else
+        exitfullscreen();
+}
+//# sourceMappingURL=fullscreen.js.map

package/dist/src/utils/fullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.js","sourceRoot":"","sources":["../../../src/utils/fullscreen.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,OAAoB,EAAE,SAA8B,EAAE,WAAgC;IAC/G,IAAI,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAA;IACnC,IAAI,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAA;IAErC,SAAS,oBAAoB,CAAC,CAAQ;QACpC,IACE,CAAC,QAAQ,CAAC,iBAAiB;YAC3B,YAAY;YACZ,CAAC,QAAQ,CAAC,aAAa;YACvB,YAAY;YACZ,CAAC,QAAQ,CAAC,kBAAkB;YAC5B,YAAY;YACZ,CAAC,QAAQ,CAAC,mBAAmB,EAC7B;YACA,CAAC;YAAA,CAAC,kBAAkB,EAAE,wBAAwB,EAAE,oBAAoB,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CACpF,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAC1D,CAAA;YAED,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAA;YAC/B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAA;YAEjC,WAAW,IAAI,WAAW,EAAE,CAAA;SAC7B;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAA;YAC5B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YAE7B,SAAS,IAAI,SAAS,EAAE,CAAA;SACzB;IACH,CAAC;IAED,CAAC;IAAA,CAAC,kBAAkB,EAAE,wBAAwB,EAAE,oBAAoB,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CACpF,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,oBAAoB,CAAC,CACvD,CAAA;IAED,IAAI,OAAO,CAAC,iBAAiB;QAAE,OAAO,CAAC,iBAAiB,EAAE,CAAA;IAC1D,YAAY;SACP,IAAI,OAAO,CAAC,uBAAuB;QAAE,OAAO,CAAC,uBAAuB,EAAE,CAAA;IAC3E,YAAY;SACP,IAAI,OAAO,CAAC,oBAAoB;QAAE,OAAO,CAAC,oBAAoB,EAAE,CAAA;IACrE,YAAY;SACP,IAAI,OAAO,CAAC,mBAAmB;QAAE,OAAO,CAAC,mBAAmB,EAAE,CAAA;AACrE,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,IAAI,QAAQ,CAAC,cAAc;QAAE,QAAQ,CAAC,cAAc,EAAE,CAAA;IACtD,YAAY;SACP,IAAI,QAAQ,CAAC,mBAAmB;QAAE,QAAQ,CAAC,mBAAmB,EAAE,CAAA;IACrE,YAAY;SACP,IAAI,QAAQ,CAAC,sBAAsB;QAAE,QAAQ,CAAC,sBAAsB,EAAE,CAAA;IAC3E,YAAY;SACP,IAAI,QAAQ,CAAC,gBAAgB;QAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAA;AACjE,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC9B,OAAoB,EACpB,SAA8B,EAC9B,WAAgC;IAEhC,IACE,CAAC,QAAQ,CAAC,iBAAiB;QAC3B,YAAY;QACZ,CAAC,QAAQ,CAAC,aAAa;QACvB,YAAY;QACZ,CAAC,QAAQ,CAAC,kBAAkB;QAC5B,YAAY;QACZ,CAAC,QAAQ,CAAC,mBAAmB;QAE7B,UAAU,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,CAAA;;QACxC,cAAc,EAAE,CAAA;AACvB,CAAC","sourcesContent":["/**\n * 풀스크린 전환 이후와 풀스크린 해제 이후에 호출되는 콜백함수\n * @callback FullscreenCallback\n */\nexport type FullscreenCallback = () => void\n\n/**\n * 엘리먼트를 풀스크린으로 표시되도록 한다.\n * @param {HTMLElement} element 대상 엘리먼트\n * @param {FullscreenCallback} afterfull 풀스크린이 된 이후에 호출되는 콜백함수\n * @param {FullscreenCallback} afterfinish 풀스크린이 해제된 이후에 호출되는 콜백함수\n */\nexport function fullscreen(element: HTMLElement, afterfull?: FullscreenCallback, afterfinish?: FullscreenCallback) {\n  var org_width = element.style.width\n  var org_height = element.style.height\n\n  function _fullscreen_callback(e: Event) {\n    if (\n      !document.fullscreenElement &&\n      //@ts-ignore\n      !document.mozFullScreen &&\n      //@ts-ignore\n      !document.webkitIsFullScreen &&\n      //@ts-ignore\n      !document.msFullscreenElement\n    ) {\n      ;['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event =>\n        document.removeEventListener(event, _fullscreen_callback)\n      )\n\n      element.style.width = org_width\n      element.style.height = org_height\n\n      afterfinish && afterfinish()\n    } else {\n      element.style.width = '100%'\n      element.style.height = '100%'\n\n      afterfull && afterfull()\n    }\n  }\n\n  ;['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event =>\n    document.addEventListener(event, _fullscreen_callback)\n  )\n\n  if (element.requestFullscreen) element.requestFullscreen()\n  //@ts-ignore\n  else if (element.webkitRequestFullScreen) element.webkitRequestFullScreen()\n  //@ts-ignore\n  else if (element.mozRequestFullScreen) element.mozRequestFullScreen()\n  //@ts-ignore\n  else if (element.msRequestFullscreen) element.msRequestFullscreen()\n}\n\nexport function exitfullscreen() {\n  if (document.exitFullscreen) document.exitFullscreen()\n  //@ts-ignore\n  else if (document.mozCancelFullScreen) document.mozCancelFullScreen()\n  //@ts-ignore\n  else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen()\n  //@ts-ignore\n  else if (document.msExitFullscreen) document.msExitFullscreen()\n}\n\nexport function togglefullscreen(\n  element: HTMLElement,\n  afterfull?: FullscreenCallback,\n  afterfinish?: FullscreenCallback\n) {\n  if (\n    !document.fullscreenElement &&\n    //@ts-ignore\n    !document.mozFullScreen &&\n    //@ts-ignore\n    !document.webkitIsFullScreen &&\n    //@ts-ignore\n    !document.msFullscreenElement\n  )\n    fullscreen(element, afterfull, afterfinish)\n  else exitfullscreen()\n}\n"]}

package/dist/src/utils/os.d.ts

@@ -0,0 +1,20 @@
+/**
+ * method to get operating system of running browser
+ * @returns {string} name of OS : 'Windows | 'Mac' | 'Android' | 'iOS'
+ */
+export declare function getOS(): string;
+/**
+ * method to tell if platform of running browser is kind of mobile device
+ * @returns {boolean}
+ */
+export declare function isMobileDevice(): boolean;
+/**
+ * method to tell if operating system of running browser is iOS
+ * @returns {boolean}
+ */
+export declare function isIOS(): boolean;
+/**
+ * method to tell if operating system of running browser is MacOS
+ * @returns {boolean}
+ */
+export declare function isMacOS(): boolean;

package/dist/src/utils/os.js

@@ -0,0 +1,41 @@
+var os = 'Unknown OS';
+if (navigator.userAgent.indexOf('Win') != -1)
+    os = 'Windows';
+else if (navigator.userAgent.indexOf('Mac') != -1)
+    os = 'Mac';
+else if (navigator.userAgent.indexOf('Linux') != -1)
+    os = 'Linux';
+else if (navigator.userAgent.indexOf('Android') != -1)
+    os = 'Android';
+else if (navigator.userAgent.indexOf('like Mac') != -1)
+    os = 'iOS';
+var mobile = os === 'iOS' || os === 'Android';
+/**
+ * method to get operating system of running browser
+ * @returns {string} name of OS : 'Windows | 'Mac' | 'Android' | 'iOS'
+ */
+export function getOS() {
+    return os;
+}
+/**
+ * method to tell if platform of running browser is kind of mobile device
+ * @returns {boolean}
+ */
+export function isMobileDevice() {
+    return mobile;
+}
+/**
+ * method to tell if operating system of running browser is iOS
+ * @returns {boolean}
+ */
+export function isIOS() {
+    return os === 'iOS';
+}
+/**
+ * method to tell if operating system of running browser is MacOS
+ * @returns {boolean}
+ */
+export function isMacOS() {
+    return os === 'Mac';
+}
+//# sourceMappingURL=os.js.map

package/dist/src/utils/os.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"os.js","sourceRoot":"","sources":["../../../src/utils/os.ts"],"names":[],"mappings":"AAAA,IAAI,EAAE,GAAG,YAAY,CAAA;AAErB,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAAE,EAAE,GAAG,SAAS,CAAA;KACvD,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAAE,EAAE,GAAG,KAAK,CAAA;KACxD,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAAE,EAAE,GAAG,OAAO,CAAA;KAC5D,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAAE,EAAE,GAAG,SAAS,CAAA;KAChE,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAAE,EAAE,GAAG,KAAK,CAAA;AAElE,IAAI,MAAM,GAAG,EAAE,KAAK,KAAK,IAAI,EAAE,KAAK,SAAS,CAAA;AAE7C;;;GAGG;AACH,MAAM,UAAU,KAAK;IACnB,OAAO,EAAE,CAAA;AACX,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,MAAM,CAAA;AACf,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,KAAK;IACnB,OAAO,EAAE,KAAK,KAAK,CAAA;AACrB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,OAAO;IACrB,OAAO,EAAE,KAAK,KAAK,CAAA;AACrB,CAAC","sourcesContent":["var os = 'Unknown OS'\n\nif (navigator.userAgent.indexOf('Win') != -1) os = 'Windows'\nelse if (navigator.userAgent.indexOf('Mac') != -1) os = 'Mac'\nelse if (navigator.userAgent.indexOf('Linux') != -1) os = 'Linux'\nelse if (navigator.userAgent.indexOf('Android') != -1) os = 'Android'\nelse if (navigator.userAgent.indexOf('like Mac') != -1) os = 'iOS'\n\nvar mobile = os === 'iOS' || os === 'Android'\n\n/**\n * method to get operating system of running browser\n * @returns {string} name of OS : 'Windows | 'Mac' | 'Android' | 'iOS'\n */\nexport function getOS() {\n  return os\n}\n\n/**\n * method to tell if platform of running browser is kind of mobile device\n * @returns {boolean}\n */\nexport function isMobileDevice() {\n  return mobile\n}\n\n/**\n * method to tell if operating system of running browser is iOS\n * @returns {boolean}\n */\nexport function isIOS() {\n  return os === 'iOS'\n}\n\n/**\n * method to tell if operating system of running browser is MacOS\n * @returns {boolean}\n */\nexport function isMacOS() {\n  return os === 'Mac'\n}\n"]}

package/dist/src/utils/swipe-listener.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Starts monitoring swipes on the given element and
+ * emits `swipe` event when a swipe gesture is performed.
+ * @param {DOMElement} element Element on which to listen for swipe gestures.
+ * @param {Object} options Optional: Options.
+ * @return {Object}
+ */
+export declare function SwipeListener(element: HTMLElement, options?: any): {
+    off: () => void;
+} | undefined;