coffeescript-ui/src/elements/MultiInput/MultiInput.coffee

Coffeescript User Interface System

###
 * coffeescript-ui - Coffeescript User Interface System (CUI)
 * Copyright (c) 2013 - 2016 Programmfabrik GmbH
 * MIT Licence
 * https://github.com/programmfabrik/coffeescript-ui, http://www.coffeescript-ui.org
###

class CUI.MultiInput extends CUI.DataFieldInput
	constructor: (opts) ->
		super(opts)
		@addClass("cui-multi-input")
		if @_textarea
			@addClass("cui-multi-input--textarea")

	initOpts: ->
		super()
		@addOpts
			textarea:
				default: false
				check: Boolean
			spellcheck:
				default: false
				check: Boolean
			placeholder:
				check: "PlainObject"
			onFocus:
				check: Function
			onClick:
				check: Function
			onKeyup:
				check: Function
			onBlur:
				check: Function
			control:
				mandatory: true
				check: (v) ->
					v instanceof CUI.MultiInputControl
			content_size:
				default: false
				check: Boolean

	readOpts: ->
		super()
		@__inputs = null

	disable: ->
		super()
		if not @__inputs
			return
		for inp in @__inputs
			inp.disable()
		return

	enable: ->
		super()
		if not @__inputs
			return
		for inp in @__inputs
			inp.enable()
		return

	remove: ->
		if @__inputs
			for input in @__inputs
				input.destroy()
			delete @__inputs
		return super()

	initValue: ->
		if CUI.util.isNull(v = @__data[@_name])
			v = @__data[@_name] = {}

		for key in @_control.getKeys()
			if not v.hasOwnProperty(key.name)
				v[key.name] = ""
		@

	setData: (data) ->
		super(data)
		@setDataOnInputs()

	setDataOnInputs: ->
		if not @__inputs
			return

		input_data = CUI.util.copyObject(@getValue(), true)
		for input in @__inputs
			input.setData(input_data)
			if @_undo_support
				v = @getInitValue()[input.getName()]
			else
				v = @getValue()[input.getName()]

			input.setCheckChangedValue(v)

	setInputVisibility: ->
		# the "append" re-orders the input, if needed

		names = (key.name for key in @_control.getKeys())
		# sort input by key
		@__inputs.sort (a, b) =>
			CUI.util.compareIndex(
				names.indexOf(a.getOpt("name"))
				names.indexOf(b.getOpt("name"))
			)

		ok = false
		for inp in @__inputs
			CUI.dom.append(@__multiInputDiv, inp.DOM)
			if @_control.isEnabled(inp.getName())
				inp.show()
				ok = true
			else
				inp.hide()

		if not ok
			console.warn("MulitInput.setInputVisibility: No input visible.", input: @__inputs, control: @_control)

		CUI.Events.trigger
			type: "content-resize"
			node: @DOM

		return

	getUniqueIdForLabel: ->
		@__initInputs()
		for inp in @__inputs
			if @_control.isEnabled(inp.getName())
				return inp.getUniqueIdForLabel()
		null

	focus: ->
		for inp in @__inputs
			if @_control.isEnabled(inp.getName())
				inp.focus()
				return
		return

	displayValue: ->
		super()
		for input in @__inputs
			input.displayValue()
		@

	__initInputs: ->
		if @__inputs
			return

		@__multiInputDiv = CUI.dom.div("cui-multi-input-container")

		CUI.Events.listen
			type: "multi-input-control-update"
			node: @__multiInputDiv
			call: (ev) =>
				# console.debug ev.getType(), @__multiInputDiv[0], @_control.getKeys()
				@setInputVisibility()

		# DOM.registerEvent(multiInputDiv, "easydbui-multi-input-control-update")
		# multiInputDiv.on "easydbui-multi-input-control-update", (ev)

		@__inputs = []

		for key, idx in @_control.getKeys()
			input_opts =
				class: "cui-multi-input-input"
				textarea: @_textarea
				spellcheck: @_spellcheck
				onBlur: @_onBlur
				onClick: @_onClick
				onFocus: @_onFocus
				onKeyup: @_onKeyup
				name: key.name
				undo_support: false
				content_size: @_content_size
				placeholder: @_placeholder?[key.name]

			input = new CUI.MultiInputInput(input_opts)
			input.render()

			do (input, key) =>
				btn = new CUI.defaults.class.Button
					text: key.tag
					tabindex: null
					disabled: !@_control.hasUserControl()
					onClick: (ev, btn) =>
						@_control.showUserControl(ev, btn, @__multiInputDiv)
					role: "multi-input-tag"
					class: "cui-multi-input-tag-button"
					tooltip: key.tooltip

				input.append(btn, "right")

				CUI.Events.listen
					type: "data-changed"
					node: input
					call: (ev) =>
						values = CUI.util.copyObject(@getValue())
						values[key.name] = input.getValue()
						ev.stopImmediatePropagation()
						@storeValue(values)

			@__inputs.push(input)
		return


	render: ->
		super()
		@__initInputs()

		if @hasData()
			@setDataOnInputs()

		@replace(@__multiInputDiv)
		@setInputVisibility()
		@