{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-bp2019/src/babylonian-programming-editor/ui/input-field.js"],"names":["Connector","maybeUnpackString","defaultConnections","InputField","constructor","parent","name","placeholder","changeCallback","className","style","hasConnector","_parent","_name","_changeCallback","_placeholder","_mode","_input","id","length","addEventListener","_adjustSize","bind","fireChange","_select","_onSelectChange","_connector","_onConnectorChange","_element","element","selectedIndex","mode","newTarget","setAttribute","value","input","isConnected","validModes","includes","forEach","m","classList","remove","add","stringValue","removeAttribute","options","oldValue","innerHTML","newIndex","map","option","index","appendChild","textContent","stringTarget","target","setTargetKey","targetKey","isBroken","i"],"mappings":"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","file":"input-field.js","sourcesContent":["import Connector from \"./connector.js\";\nimport { maybeUnpackString } from \"../utils/utils.js\";\nimport { defaultConnections } from \"../utils/defaults.js\";\n\nexport default class InputField {\n  \n  constructor(parent, name, placeholder, changeCallback, className = \"\", style = \"\", hasConnector = true) {\n    this._parent = parent;\n    this._name = name;\n    this._changeCallback = changeCallback;\n    this._placeholder = placeholder;\n    this._mode = \"input\"; // input, select, connect\n    \n    // Input\n    this._input = <input\n        type=\"text\"\n        id={this.id}\n        name={name}\n        size={placeholder.length}\n        value=\"\"\n        placeholder={placeholder}>\n      </input>;\n    this._input.addEventListener(\"input\", this._adjustSize.bind(this));\n    this._input.addEventListener(\"change\", this.fireChange.bind(this));\n    \n    // Select\n    this._select = <select></select>;\n    this._select.addEventListener(\"change\", this._onSelectChange.bind(this));\n    \n    // Connect\n    this._connector = new Connector(this, this._onConnectorChange.bind(this));\n    \n    // Element\n    this._element = <span class={\"input-field \" + className} style={style}>\n        {this._input}{hasConnector ? this._select : \"\"}{hasConnector ? this._connector.element : \"\"}\n      </span>;\n  }\n  \n  _onSelectChange() {\n    if(this._select.selectedIndex) {\n      this.mode = \"select\";\n    } else {\n      this.mode = \"input\";\n    }\n    this.fireChange();\n  }\n  \n  _onConnectorChange(newTarget){\n    if(newTarget) {\n      this.mode = \"connect\";\n    } else {\n      this.mode = \"input\";\n    }\n    this.fireChange();\n  }\n  \n  _adjustSize() {\n    this._input.setAttribute(\n        \"size\",\n        this._input.value.length ? this._input.value.length : this._placeholder.length);\n    return true;\n  }\n  \n  fireChange() {\n    this._adjustSize();\n    this._changeCallback(this.id, this._name);\n  }\n  \n  get element() {\n    return this._element;\n  }\n  \n  get id() {\n    return `${this._parent.id}_${this._name}`;\n  }\n  \n  get input() {\n    return this._input;\n  }\n  \n  get isConnected() {\n    return this._connector.isConnected;\n  }\n  \n  get mode() {\n    return this._mode;\n  }\n  \n  set mode(mode) {\n    const validModes = [\"input\", \"select\", \"connect\"];\n    if(!validModes.includes(mode)) {\n      return; \n    }\n    \n    this._mode = mode;\n    validModes.forEach(m => this._element.classList.remove(m));\n    this._element.classList.add(mode);\n    \n    if(mode !== \"input\") {\n      this._input.setAttribute(\"readonly\", \"readonly\");\n      this._input.value = this.stringValue;\n    } else {\n      this._input.removeAttribute(\"readonly\");\n      this._input.value = \"\";\n    }\n  }\n  \n  set options(options) {\n    let oldValue = 0;\n    if(this._select.options.length) {\n      oldValue = this._select.options[this._select.selectedIndex].value;\n    }\n    \n    this._select.innerHTML = \"\";\n    \n    let newIndex = 0;\n    options.map((option, index) => {\n      this._select.appendChild(<option value={option.id}>{maybeUnpackString(option.name)}</option>)\n      if(option.id === oldValue) {\n        newIndex = index;\n      }\n    });\n    this._select.selectedIndex = newIndex;\n  }\n  \n  get stringValue() {\n    switch(this.mode) {\n      case \"input\":\n        return this._input.value;\n      case \"select\":\n        return this._select.options[this._select.selectedIndex].textContent;\n      case \"connect\":\n        return this._connector.stringTarget;\n    }\n  }\n  \n  get style() {\n    return this._element.style;\n  }\n  \n  set style(style) {\n    this._element.style = style;\n  }\n  \n  get target() {\n    return this._connector.target;\n  }\n  \n  set target(target) {\n    this._connector.target = target;\n  }\n  \n  setTargetKey(targetKey) {\n    if(targetKey in defaultConnections()) {\n      this.target = defaultConnections()[targetKey];\n      return true;\n    } else {\n      this._connector.isConnected = true;\n      this._connector.isBroken = true;\n      this._onConnectorChange(true);\n      return false;\n    }\n  }\n  \n  get value() {\n    let value;\n    switch(this.mode) {\n      case \"input\":\n        value = this._input.value;\n        break;\n      case \"select\":\n        value = this._select.options[this._select.selectedIndex].value;\n        break;\n      case \"connect\":\n        value = this.id;\n        break;\n    }\n    \n    return {\n      mode: this.mode,\n      value: value\n    };\n  }\n  \n  set value(value) {\n    switch(value.mode) {\n      case \"input\":\n        this.mode = value.mode;\n        this._input.value = value.value;\n        break;\n      case \"select\":\n        for(let i in this._select.options) {\n          if(this._select.options[i].value === value.value) {\n            this._select.selectedIndex = i;\n          }\n        }\n        this.mode = value.mode;\n        break;\n      case \"connect\":\n        this.setTargetKey(value.value);\n        this.mode = value.mode;\n        break;\n    }\n    this.fireChange();\n  }\n}\n"]}