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

package/src/form.js

@@ -1,245 +0,0 @@
-/*
- * Copyright � HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'select',
-      label: 'method',
-      name: 'method',
-      property: {
-        options: [
-          {
-            display: 'GET',
-            value: 'GET'
-          },
-          {
-            display: 'POST',
-            value: 'POST'
-          }
-        ]
-      }
-    },
-    {
-      type: 'string',
-      label: 'action',
-      name: 'action'
-    },
-    {
-      type: 'number',
-      label: 'period',
-      name: 'period'
-    },
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'string',
-      label: 'authorization',
-      name: 'authorization'
-    },
-    {
-      type: 'select',
-      label: 'format',
-      name: 'format',
-      property: {
-        options: [
-          {
-            display: 'JSON',
-            value: 'JSON'
-          },
-          {
-            display: 'XML',
-            value: 'XML'
-          },
-          {
-            display: 'TEXT',
-            value: 'TEXT'
-          }
-        ]
-      }
-    },
-    {
-      type: 'select',
-      label: 'content-type',
-      name: 'contentType',
-      property: {
-        options: [
-          {
-            display: 'JSON',
-            value: 'application/json'
-          },
-          {
-            display: 'FORM',
-            value: 'application/x-www-form-urlencoded'
-          },
-          {
-            display: 'TEXT',
-            value: 'text/plain'
-          }
-        ]
-      }
-    },
-    {
-      type: 'checkbox',
-      label: 'with-credentials',
-      name: 'withCredentials'
-    },
-    {
-      type: 'checkbox',
-      label: 'submit-on-load',
-      name: 'submitOnLoad'
-    },
-    {
-      type: 'checkbox',
-      label: 'debug',
-      name: 'debug'
-    }
-  ],
-  'value-property': 'action'
-}
-
-import { Component, HTMLOverlayContainer, warn } from '@hatiolab/things-scene'
-import { xml2js } from 'xml-js'
-
-export default class Form extends HTMLOverlayContainer {
-  dispose() {
-    super.dispose()
-    this._stopRepeater()
-  }
-
-  setElementProperties(form) {
-    var { action = '', method = 'POST', name = '', contentType = '' } = this.state
-
-    form.action = action
-    form.method = method
-    form.contentType = contentType
-    form.name = name
-  }
-
-  get action() {
-    return this.state.action
-  }
-
-  set action(action) {
-    this.setState('action', action)
-    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 {
-      switch (this.get('format')) {
-        case 'JSON':
-          result = JSON.parse(result)
-          break
-        case 'XML':
-          result = xml2js(result, {
-            compact: true
-          })
-          break
-      }
-
-      if (this.state.debug) {
-        console.log('[FORM-RESULT]', result)
-      }
-
-      this.setState('data', result)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  oncreate_element(form) {
-    if (!this.app.isViewMode) return
-
-    var _ = e => {
-      e.preventDefault()
-      var url = form.action
-      var xhr = new XMLHttpRequest()
-
-      var params = [].filter
-        .call(form.elements, function(el) {
-          if (el.type == 'radio' || el.type == 'checkbox') return el.checked
-          return true
-        })
-        .filter(function(el) {
-          return !!el.name
-        })
-        .filter(function(el) {
-          return !el.disabled
-        })
-        .map(function(el) {
-          return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value)
-        })
-        .join('&')
-
-      xhr.onloadend = this._onload.bind(this)
-
-      if (form.method == 'get') xhr.open(form.method, url + '?' + params)
-      else xhr.open(form.method, url)
-
-      if (form.contentType) xhr.setRequestHeader('Content-Type', form.contentType)
-
-      if (this.get('authorization')) xhr.setRequestHeader('Authorization', this.get('authorization'))
-
-      if (this.get('withCredentials')) xhr.withCredentials = true
-
-      if (form.method == 'get') xhr.send()
-      else xhr.send(params)
-
-      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('form', Form)

package/src/iframe.js

@@ -1,41 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'src',
-      name: 'src'
-    }
-  ],
-  'value-property': 'src'
-}
-
-import { Component, HTMLOverlayElement } from '@hatiolab/things-scene'
-
-export default class IFrame extends HTMLOverlayElement {
-  get src() {
-    return this.getState('src')
-  }
-
-  set src(src) {
-    this.setState('src', src)
-  }
-
-  setElementProperties(iframe) {
-    var { src = '' } = this.state
-
-    if (iframe.src != src) iframe.src = src
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('iframe', IFrame)

package/src/img.js

@@ -1,41 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'src',
-      name: 'src'
-    }
-  ],
-  'value-property': 'src'
-}
-
-import { Component, HTMLOverlayElement } from '@hatiolab/things-scene'
-
-export default class Img extends HTMLOverlayElement {
-  setElementProperties(img) {
-    var { src = '' } = this.state
-
-    if (img.src != src) img.src = src
-  }
-
-  get src() {
-    return this.get('src')
-  }
-
-  set src(src) {
-    this.set('src', src)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('img', Img)

package/src/index.js

@@ -1,27 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-export { default as Form } from './form'
-export { default as FieldSet } from './fieldset'
-export { default as Select } from './select'
-export { default as TextArea } from './textarea'
-export { default as Button } from './button'
-export { default as Radio } from './radio'
-export { default as CheckBox } from './checkbox'
-export { default as IFrame } from './iframe'
-export { default as Img } from './img'
-export { default as Video } from './video'
-export { default as Embed } from './embed'
-export { default as Link } from './link'
-export { default as Div } from './div'
-
-export { default as Input } from './input'
-export { default as InputNumber } from './input-number'
-export { default as InputDate } from './input-date'
-export { default as InputFile } from './input-file'
-export { default as InputColor } from './input-color'
-export { default as InputSubmit } from './input-submit'
-export { default as RadioGroup } from './radio-group'
-
-export { default as Template } from './template'

package/src/input-color.js

@@ -1,53 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'color',
-      label: 'value',
-      name: 'text',
-      property: {
-        withoutAlpha: true,
-        valueType: 'hex'
-      }
-    },
-    {
-      type: 'checkbox',
-      label: 'submit-on-change',
-      name: 'submitOnChange'
-    },
-    {
-      type: 'checkbox',
-      label: 'spread-on-init',
-      name: 'spreadOnInit'
-    }
-  ],
-  'value-property': 'text'
-}
-
-import { Component } from '@hatiolab/things-scene'
-import Input from './input'
-import TinyColor from 'tinycolor2'
-
-export default class InputColor extends Input {
-  get nature() {
-    return NATURE
-  }
-
-  setElementProperties(element) {
-    this.value = TinyColor(this.value || '#000000').toHexString()
-    super.setElementProperties(element)
-  }
-}
-
-Component.register('input-color', InputColor)

package/src/input-date.js

@@ -1,62 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'date',
-      label: 'value',
-      name: 'text'
-    },
-    {
-      type: 'date',
-      label: 'min',
-      name: 'min'
-    },
-    {
-      type: 'date',
-      label: 'max',
-      name: 'max'
-    },
-    {
-      type: 'checkbox',
-      label: 'submit-on-change',
-      name: 'submitOnChange'
-    },
-    {
-      type: 'checkbox',
-      label: 'spread-on-init',
-      name: 'spreadOnInit'
-    }
-  ],
-  'value-property': 'text'
-}
-
-import { Component } from '@hatiolab/things-scene'
-import Input from './input'
-
-export default class InputDate extends Input {
-  get nature() {
-    return NATURE
-  }
-
-  setElementProperties(element) {
-    super.setElementProperties(element)
-
-    var { min, max } = this.state
-
-    element.min = min
-    element.max = max
-  }
-}
-
-Component.register('input-date', InputDate)

package/src/input-file.js

@@ -1,44 +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: 'checkbox',
-      label: 'multiple',
-      name: 'multiple'
-    }
-  ],
-  'value-property': 'text'
-}
-
-import { Component } from '@hatiolab/things-scene'
-import Input from './input'
-
-export default class InputFile extends Input {
-  get nature() {
-    return NATURE
-  }
-
-  setElementProperties(element) {
-    super.setElementProperties(element)
-
-    element.multiple = !!this.state.multiple
-  }
-}
-
-Component.register('input-file', InputFile)

package/src/input-number.js

@@ -1,69 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'name',
-      name: 'name'
-    },
-    {
-      type: 'number',
-      label: 'value',
-      name: 'text'
-    },
-    {
-      type: 'number',
-      label: 'min',
-      name: 'min'
-    },
-    {
-      type: 'number',
-      label: 'max',
-      name: 'max'
-    },
-    {
-      type: 'number',
-      label: 'step',
-      name: 'step'
-    },
-    {
-      type: 'checkbox',
-      label: 'submit-on-change',
-      name: 'submitOnChange'
-    },
-    {
-      type: 'checkbox',
-      label: 'spread-on-init',
-      name: 'spreadOnInit'
-    }
-  ],
-  'value-property': 'text'
-}
-
-import { Component } from '@hatiolab/things-scene'
-import Input from './input'
-
-export default class InputNumber extends Input {
-  get nature() {
-    return NATURE
-  }
-
-  setElementProperties(element) {
-    super.setElementProperties(element)
-
-    var { min = 0, max = 100, step = 1 } = this.state
-
-    element.min = min
-    element.max = max
-    element.step = step
-  }
-}
-
-Component.register('input-number', InputNumber)
-Component.register('input-range', InputNumber)

package/src/input-submit.js

@@ -1,39 +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'
-    }
-  ],
-  'value-property': 'text'
-}
-
-import { Component } from '@hatiolab/things-scene'
-import Input from './input'
-
-export default class InputSubmit extends Input {
-  get nature() {
-    return NATURE
-  }
-
-  setElementProperties(element) {
-    super.setElementProperties(element)
-  }
-}
-
-Component.register('input-button', InputSubmit)
-Component.register('input-submit', InputSubmit)
-Component.register('input-reset', InputSubmit)