@operato/attachment 1.0.0-alpha.5 → 1.0.0-alpha.9

package/src/ox-property-editor-attachment-selector.ts

@@ -0,0 +1,112 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+import './ox-attachment-list.js'
+
+import { PopupHandle, openPopup } from '@operato/layout'
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+import { i18next } from '@operato/i18n'
+
+@customElement('ox-property-editor-attachment-selector')
+export class OxPropertyEditorAttachmentSelector extends OxPropertyEditor {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      input[type='text'] {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+
+      mwc-icon {
+        position: absolute;
+        top: 0;
+        right: 3px;
+      }
+    `
+  ]
+
+  @property({ type: String }) value: string = ''
+  @property({ type: Object }) properties: any
+
+  private popup?: PopupHandle
+
+  render() {
+    return html`
+      <input
+        id="text"
+        type="text"
+        .value=${this.value || ''}
+        @change=${(e: KeyboardEvent) => this._onInputChanged(e)}
+      />
+
+      <mwc-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</mwc-icon>
+    `
+  }
+
+  getIconByCategory() {
+    var { category } = this.properties || {}
+    switch (category) {
+      case 'audio':
+        return 'library_music'
+      case 'video':
+        return 'video_library'
+      case 'image':
+        return 'image'
+      case 'text':
+      case 'application':
+      default:
+        return 'attachment'
+    }
+  }
+
+  _onInputChanged(e: KeyboardEvent) {
+    this.value = (e.target as HTMLInputElement).value
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    /*
+     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var value = this.value || {}
+    var { category = 'application' } = this.properties || {}
+
+    var template = html`
+      <ox-attachment-list
+        .creatable=${true}
+        .category=${category}
+        @attachment-selected=${async (e: CustomEvent) => {
+          var attachment = e.detail.attachment
+          this.value = `/attachment/${attachment.path}`
+
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+
+          this.popup && this.popup.close()
+        }}
+      ></ox-attachment-list>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select attachment')
+    })
+  }
+}