@things-factory/scene-form 5.0.0-alpha.9 → 5.0.0-zeta.1

package/src/select.js

@@ -1,172 +0,0 @@
-/*
- * Copyright � HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'value',
-      name: 'value'
-    },
-    {
-      type: 'number',
-      label: 'size',
-      name: 'size'
-    },
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'checkbox',
-      label: 'submit-on-change',
-      name: 'submitOnChange'
-    },
-    {
-      type: 'checkbox',
-      label: 'copy-value-to-data',
-      name: 'copyValueToData'
-    },
-    {
-      type: 'string',
-      label: 'text-field',
-      name: 'textField'
-    },
-    {
-      type: 'string',
-      label: 'value-field',
-      name: 'valueField'
-    },
-    {
-      type: 'options',
-      label: 'options',
-      name: 'options'
-    }
-  ],
-  'value-property': 'value'
-}
-
-import { Component, HTMLOverlayElement, warn } from '@hatiolab/things-scene'
-
-export default class Select extends HTMLOverlayElement {
-  get nature() {
-    return NATURE
-  }
-
-  buildOptions() {
-    var { options = [], textField, valueField, value } = this.state
-
-    if (!(options instanceof Array)) options = []
-
-    this.element.textContent = ''
-    var defaultValue
-
-    options.map &&
-      options
-        .map((option, index) => {
-          let text, value
-
-          if (!textField) {
-            text = option && (option['text'] || option)
-          } else if (textField == '(index)') {
-            text = index
-          } else {
-            // String.fromCharCode(160) == '&nbsp'
-            text = (option && option[textField]) || String.fromCharCode(160)
-          }
-
-          if (!valueField) {
-            value = option && (option['value'] || option)
-          } else if (valueField == '(index)') {
-            value = index
-          } else {
-            value = option && option[valueField]
-          }
-
-          if (defaultValue === undefined) {
-            defaultValue = value
-          }
-
-          if (value == this.value) {
-            defaultValue = this.value
-          }
-
-          return { text, value }
-        })
-        .forEach(option => {
-          var el = document.createElement('option')
-          el.value = typeof option.value == 'string' ? option.value : JSON.stringify(option.value)
-          el.text = option.text
-          this.element.appendChild(el)
-        })
-
-    if (defaultValue !== undefined && this.value !== defaultValue) {
-      this.value = JSON.stringify(defaultValue)
-    }
-
-    if (this.element.value != this.value) {
-      this.element.value = this.value
-      this.element.dispatchEvent(new Event('change'))
-    }
-  }
-
-  createElement() {
-    super.createElement()
-
-    this.buildOptions()
-
-    var element = this.element
-
-    element.value = this.get('value') || ''
-
-    element.onchange = e => {
-      this.set('value', element.value)
-    }
-  }
-
-  setElementProperties(element) {
-    var { size, name } = this.state
-
-    element.size = size
-    element.name = name
-  }
-
-  onchange(after, before) {
-    super.onchange(after, before)
-
-    if ('value' in after && this.element) {
-      this.element.value = after.value
-      if (this.get('copyValueToData')) {
-        try {
-          this.data = JSON.parse(after.value)
-        } catch (e) {
-          this.data = after.value
-        }
-      }
-
-      if (this.get('submitOnChange') && this.element.form)
-        this.element.form.dispatchEvent(
-          new Event('submit', {
-            cancelable: true
-          })
-        )
-    }
-
-    if ('options' in after) this.buildOptions()
-  }
-
-  get options() {
-    return this.getState('options')
-  }
-
-  set options(options) {
-    this.setState('options', options)
-  }
-}
-
-Component.register('select', Select)

package/src/soap-client.js

@@ -1,213 +0,0 @@
-/*
- * Copyright � HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'endpoint',
-      name: 'endpoint'
-    },
-    {
-      type: 'string',
-      label: 'soap-action',
-      name: 'soapAction'
-    },
-    {
-      type: 'string',
-      label: 'method',
-      name: 'method'
-    },
-    {
-      type: 'string',
-      label: 'namespace',
-      name: 'namespace'
-    },
-    {
-      type: 'number',
-      label: 'period',
-      name: 'period'
-    },
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'string',
-      label: 'authorization',
-      name: 'authorization'
-    },
-    {
-      type: 'checkbox',
-      label: 'with-credentials',
-      name: 'withCredentials'
-    },
-    {
-      type: 'checkbox',
-      label: 'submit-on-load',
-      name: 'submitOnLoad'
-    },
-    {
-      type: 'checkbox',
-      label: 'debug',
-      name: 'debug'
-    }
-  ],
-  'value-property': 'endpoint'
-}
-
-import { Component, HTMLOverlayContainer } from '@hatiolab/things-scene'
-import { xml2js } from 'xml-js'
-
-export default class SoapClient extends HTMLOverlayContainer {
-  dispose() {
-    super.dispose()
-    this._stopRepeater()
-  }
-
-  get tagName() {
-    return 'form'
-  }
-
-  setElementProperties(form) {
-    var { endpoint = '', name = '' } = this.state
-
-    form.action = endpoint
-    form.method = 'POST'
-    form.name = name
-  }
-
-  get endpoint() {
-    return this.state.endpoint
-  }
-
-  set endpoint(endpoint) {
-    this.setState('endpoint', endpoint)
-    this._startRepeater()
-  }
-
-  get period() {
-    return this.state.period * 1000
-  }
-
-  set period(period) {
-    this.setState('period', period)
-    this._startRepeater()
-  }
-
-  _startRepeater() {
-    this._stopRepeater()
-
-    if (!this.app.isViewMode) return
-
-    if (this.period) {
-      this._repeatInterval = setInterval(this._submit.bind(this), this.period)
-    }
-  }
-
-  _stopRepeater() {
-    if (this._repeatInterval) clearInterval(this._repeatInterval)
-  }
-
-  _onload(e) {
-    var result = e.target.response
-    try {
-      result = xml2js(result, {
-        compact: true
-      })
-
-      if (this.state.debug) {
-        console.log('[SOAP-RESULT]', result)
-      }
-
-      this.setState('data', result)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  oncreate_element(form) {
-    if (!this.app.isViewMode) return
-
-    var _ = e => {
-      e.preventDefault()
-
-      var { endpoint, soapAction, method, namespace, debug } = this.state
-
-      var xhr = new XMLHttpRequest()
-
-      var params = [].filter
-        .call(form.elements, el => {
-          if (el.type == 'radio' || el.type == 'checkbox') return el.checked
-          return true
-        })
-        .filter(el => {
-          return !!el.name
-        })
-        .filter(el => {
-          return !el.disabled
-        })
-        .map(el => {
-          return `<${el.name}>${el.value}</${el.name}>`
-        })
-        .join('\n      ')
-
-      xhr.onloadend = this._onload.bind(this)
-
-      xhr.open('POST', endpoint)
-
-      xhr.setRequestHeader('Content-Type', 'text/xml;charset=UTF-8')
-      xhr.setRequestHeader('SOAPAction', `${endpoint}#${soapAction}`)
-
-      if (this.get('authorization')) xhr.setRequestHeader('Authorization', this.get('authorization'))
-      if (this.get('withCredentials')) xhr.withCredentials = true
-
-      let soapEnvelope = `
-<s:Envelope 
-  xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
-  <s:Header/>
-  <s:Body>
-    <ns0:${method} xmlns:ns0="${namespace}">
-      ${params}
-    </ns0:${method}>
-  </s:Body>
-</s:Envelope>
-`
-
-      if (debug) {
-        console.log('[SOAP-REQUEST-ENVELOPE]', soapEnvelope)
-      }
-
-      xhr.send(soapEnvelope)
-
-      return false
-    }
-
-    form.onsubmit = _
-
-    if (this.getState('submitOnLoad')) {
-      setTimeout(this._submit.bind(this), 100)
-    }
-
-    this._startRepeater()
-  }
-
-  _submit() {
-    this.element.dispatchEvent(
-      new Event('submit', {
-        cancelable: true
-      })
-    )
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('soap-client', SoapClient)

package/src/template.js

@@ -1,99 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'textarea',
-      label: 'template',
-      name: 'template'
-    },
-    {
-      type: 'string',
-      label: 'apply-to',
-      name: 'applyTo'
-    }
-  ]
-}
-
-import { Component, HTMLOverlayContainer, error } from '@hatiolab/things-scene'
-
-const FILLSTYLE = {
-  type: 'pattern',
-  fitPattern: true,
-  image:
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAMFBMVEUAAAAdHR0AAAAAAAAAAAAREREODg4AAAATExMAAAAAAAAAAAAAAAAAAAAWFhYAAABtUS6TAAAAD3RSTlMArnboZDwVtVUHmMTU9CygGbkuAAABBklEQVR42u3Vy47DMAgFUMbE78f9/7+dqpVKFNUzwKqLnD0RvjGYbrdvF8tK9JBWieTRAO6tdQYyeWS8DfIYeONEdmlCLE+GOClkV3ASyC7gpPn+ouiODAdOeJkjHMAZF2OCE1eHK0BfkLXho5yU8XVsjKWKj7E1iya/44kvpcdLJa3LOdg3zIIr2fg7qEd4umYQXpJqiPZyVbQwsMXJtoq889CwkUknMT6ai5QOfBRcb4oY1fMmiBnV1TFk+YDooST6T30UM7a4h5hoS4r/wjnEusleLeiusPFKFwhXCx0GXHUjZBmrDJNRfQ2IYthDYv/grwmrqG1AtV0ShKuF+ONQ6Hb7Hr9EkkNRgwrYbAAAAABJRU5ErkJggg=='
-}
-
-export default class Template extends HTMLOverlayContainer {
-  createElement() {
-    super.createElement()
-
-    this.element.value = this.get('value') || ''
-    this.element.onchange = e => {
-      this.set('value', this.element.value)
-    }
-  }
-
-  dispose() {
-    super.dispose()
-
-    this.targets && this.targets.forEach(target => (target.shadowRoot.innerHTML = '<slot></slot>'))
-    delete this.targets
-  }
-
-  /*
-   * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
-   * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
-   */
-  setElementProperties(template) {
-    template.innerHTML = this.state.template
-  }
-
-  /*
-   * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.
-   * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.
-   */
-  reposition() {
-    super.reposition()
-
-    var old_targets = this.targets || []
-    var targets =
-      this.rootModel && Array.prototype.slice.call(this.rootModel.overlay.querySelectorAll(this.state.applyTo))
-
-    targets &&
-      targets.forEach(target => {
-        try {
-          !target.shadowRoot && target.attachShadow({ mode: 'open' })
-          target.shadowRoot.innerHTML = this.state.template
-        } catch (e) {
-          error(e)
-        }
-
-        let idx = old_targets.indexOf(target)
-        if (idx >= 0) old_targets.splice(idx, 1)
-      })
-
-    old_targets.forEach(target => (target.shadowRoot.innerHTML = '<slot></slot>'))
-
-    this.targets = targets
-  }
-
-  get tagName() {
-    return 'template'
-  }
-
-  get fillStyle() {
-    return FILLSTYLE
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('template', Template)

package/src/textarea.js

@@ -1,85 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'string',
-      label: 'value',
-      name: 'text'
-    },
-    {
-      type: 'string',
-      label: 'placeholder',
-      name: 'placeholder'
-    },
-    {
-      type: 'checkbox',
-      label: 'readonly',
-      name: 'readonly'
-    },
-    {
-      type: 'checkbox',
-      label: 'disabled',
-      name: 'disabled'
-    },
-    {
-      type: 'number',
-      label: 'max-length',
-      name: 'maxlength'
-    }
-  ],
-  'value-property': 'text'
-}
-
-import { Component, HTMLOverlayElement } from '@hatiolab/things-scene'
-
-export default class TextArea extends HTMLOverlayElement {
-  get nature() {
-    return NATURE
-  }
-
-  get tagName() {
-    return 'textarea'
-  }
-
-  createElement() {
-    super.createElement()
-
-    this.element.style.resize = 'none'
-
-    /* element.property => component.property */
-    this.element.onchange = e => {
-      this.value = this.element.value
-    }
-  }
-
-  /* component.property => element.property */
-  setElementProperties(element) {
-    var { name = '', placeholder = '', disabled, readonly, maxlength } = this.state
-
-    try {
-      element.name = name
-      element.placeholder = placeholder
-      element.disabled = disabled
-      element.readonly = readonly
-      element.maxlength = maxlength
-      element.value = this.value
-    } catch (e) {
-      error(e)
-    }
-
-    this.data = this.value
-  }
-}
-
-Component.register('textarea', TextArea)

package/src/video.js

@@ -1,139 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'src',
-      name: 'src'
-    },
-    {
-      type: 'checkbox',
-      label: 'started',
-      name: 'started'
-    },
-    {
-      type: 'checkbox',
-      label: 'controls',
-      name: 'controls'
-    }
-  ],
-  'value-property': 'src'
-}
-
-import { Component, HTMLOverlayElement } from '@hatiolab/things-scene'
-import Hls from '!hls.js'
-
-export default class Video extends HTMLOverlayElement {
-  async oncreate_element(video) {
-    var { src, started } = this.state
-
-    video.addEventListener('canplay', () => {
-      this.started && video.play()
-    })
-
-    this.onchangesrc(src)
-    this.onchangestarted(started)
-  }
-
-  dispose() {
-    this.reset()
-    super.dispose()
-  }
-
-  reset() {
-    this._hlsSupporter && this._hlsSupporter.destroy()
-    delete this._hlsSupporter
-  }
-
-  onchange(after, before) {
-    super.onchange(after, before)
-
-    'src' in after && this.onchangesrc(after.src)
-    'started' in after && this.onchangestarted(after.started)
-  }
-
-  setElementProperties(video) {
-    var { controls } = this.state
-
-    if (controls) video.setAttribute('controls', true)
-    else video.removeAttribute('controls')
-  }
-
-  onchangestarted(started) {
-    var video = this.element
-
-    if (started) {
-      /*
-        [ video.readyState ]
-        0 = HAVE_NOTHING - no information whether or not the audio/video is ready
-        1 = HAVE_METADATA - metadata for the audio/video is ready
-        2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond
-        3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available
-        4 = HAVE_ENOUGH_DATA - enough data available to start playing
-      */
-      video.readyState == 4 && video.play()
-    } else {
-      video.pause()
-    }
-  }
-
-  onchangesrc(src) {
-    this.reset()
-
-    var video = this.element
-
-    if (!video) return
-
-    video.src = src
-
-    if (src.endsWith('.m3u8') && Hls.isSupported()) {
-      // http-live-streaming protocol
-      this._hlsSupporter = new Hls()
-      this._hlsSupporter.loadSource(src)
-      this._hlsSupporter.attachMedia(video)
-
-      this._hlsSupporter.on(Hls.Events.MANIFEST_PARSED, () => {
-        this.started && video.play()
-      })
-      // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
-      // When the browser has built-in HLS support (check using `canPlayType`),
-      // we can provide an HLS manifest(i.e. .m3u8 URL) directly to the video element throught the`src` property.
-      // This is using the built-in support of the plain video element, without using hls.js.
-      // [ sample ... ]
-      // if (video.canPlayType('application/vnd.apple.mpegurl')) {
-      //   console.log('m3u8 supporting browser...')
-      //   video.addEventListener('canplay', () => {
-      //     video.play()
-      //   })
-      // }
-    }
-  }
-
-  get src() {
-    return this.getState('src')
-  }
-
-  set src(src) {
-    this.setState('src', src)
-  }
-
-  get started() {
-    return this.getState('started')
-  }
-
-  set started(started) {
-    this.setState('started', started)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('video', Video)