<commit_before>{Layer} = require "./Layer"
{TextLayer} = require "./TextLayer"
{Events} = require "./Events"

Events.EnterKey  = "EnterKey"
Events.BackSpaceKey  = "BackSpaceKey"
Events.InputValueChange = "InputValueChange"
Events.InputFocus = "InputFocus"

class exports.InputLayer extends TextLayer

	constructor: (options={}) ->

		_.defaults options,
			backgroundColor: "#fff"
			width: 500
			height: 100
			color: "#aaa"

		super options

		if not @multiLine
			@input = document.createElement("input")
		else
			@input = document.createElement("textarea")

		@_element.appendChild(@input)

		# Match TextLayer defaults and type properties
		@input.style.fontFamily = @fontFamily
		@input.style.fontSize = @fontSize
		@input.style.lineHeight = @lineHeight
		@input.style.fontWeight = @fontWeight
		@input.style.outline = "none"
		@input.style.backgroundColor = "transparent"
		@input.style.width = "#{@width - 64}px"
		@input.style.height = "#{@height}px"
		@input.style.cursor = "auto"

		# Input text spacing
		@input.style.marginLeft = "32px"

		if @multiLine
			@input.style.marginTop = "32px"

		# If text has been defined, use that, otherwise default to placeholder
		@_setPlaceholder()

		# Override text property setting the html
		@html = ""

		# Default focus interaction
		@input.onfocus = (e) =>

			@input.style.color = "#000"
			@input.value = ""

			# Emit focus event
			@emit(Events.InputFocus, event)

		@input.onblur = (e) =>
			if @value is ""
				@_setPlaceholder()

		@input.onkeyup = (e) =>

			# Check last character
			lastCharacter = @input.value.substr(@input.value.length - 1)

			# Exclude enter, shift, caps lock, control, alt, command etc.
			unless e.which in [13, 16, 17, 18, 20, 91, 93]
				@emit("change:value", @value)
				@emit(Events.InputValueChange, @value)

			# If enter key is pressed
			if e.which is 13
				@emit(Events.EnterKey, event)

			# If backspace key
			if e.which is 8
				@emit(Events.BackSpaceKey, event)


	_setPlaceholder: =>
		@input.value =
			if @text isnt "" and @text isnt "Type Something" then @text else "Placeholder"

		@input.style.color =
			if @color? then @color else "#aaa"

	@define "value",
		get: -> @input.value

	@define "focusColor",
		get: -> @input.style.color
		set: (value) ->
			@onInputFocus ->
				@input.style.color = value
<commit_msg>Add check for focus, improve placeholder behaviour to check if value is empty when in focus too for @jonastreub<commit_after>{Layer} = require "./Layer"
{TextLayer} = require "./TextLayer"
{Events} = require "./Events"

Events.EnterKey  = "EnterKey"
Events.BackSpaceKey  = "BackSpaceKey"
Events.InputValueChange = "InputValueChange"
Events.InputFocus = "InputFocus"

class exports.InputLayer extends TextLayer

	constructor: (options={}) ->

		_.defaults options,
			backgroundColor: "#fff"
			width: 500
			height: 100
			color: "#aaa"

		super options

		if not @multiLine
			@input = document.createElement("input")
		else
			@input = document.createElement("textarea")

		@_element.appendChild(@input)

		# Match TextLayer defaults and type properties
		@input.style.fontFamily = @fontFamily
		@input.style.fontSize = @fontSize
		@input.style.lineHeight = @lineHeight
		@input.style.fontWeight = @fontWeight
		@input.style.outline = "none"
		@input.style.backgroundColor = "transparent"
		@input.style.width = "#{@width - 64}px"
		@input.style.height = "#{@height}px"
		@input.style.cursor = "auto"

		# Input text spacing
		@input.style.marginLeft = "32px"

		if @multiLine
			@input.style.marginTop = "32px"

		# If text has been defined, use that, otherwise default to placeholder
		@_setPlaceholder()

		# Override text property setting the html
		@html = ""

		# Check if in focus
		@_isFocused = false

		# Default focus interaction
		@input.onfocus = (e) =>

			@input.style.color = "#000"
			@input.value = ""

			# Emit focus event
			@emit(Events.InputFocus, event)

			@_isFocused = true


		@input.onkeyup = (e) =>

			# Check last character
			lastCharacter = @input.value.substr(@input.value.length - 1)

			# Exclude enter, shift, caps lock, control, alt, command etc.
			unless e.which in [13, 16, 17, 18, 20, 91, 93]
				@emit("change:value", @value)
				@emit(Events.InputValueChange, @value)

			# If enter key is pressed
			if e.which is 13
				@emit(Events.EnterKey, event)

			# If backspace key
			if e.which is 8
				@emit(Events.BackSpaceKey, event)

			# Revert to placeholder
			if @value is ""
				@_setPlaceholder()

	_setPlaceholder: =>
		@input.placeholder =
			if @text isnt "" and @text isnt "Type Something" then @text else "Placeholder"

		unless @_isFocused
			@input.style.color =
				if @color? then @color else "#aaa"

	@define "value",
		get: -> @input.value

	@define "focusColor",
		get: -> @input.style.color
		set: (value) ->
			@onInputFocus ->
				@input.style.color = value

{'fraction_non_alphanumeric': 0.13352565423449414, 'fraction_numerical': 0.01359983515351329, 'mean_word_length': 3.5322128851540615, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 20, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7523597', 'n_tokens_mistral': 1894, 'n_tokens_neox': 1577, 'n_words': 431}