/*
	contact.js

	Autor: sb

	Erstellt: 04.04.2024 

	Zweck: Hilfsroutinen für das Kontaktformular

	- Das Eingabefeld für die Nachricht (TEXTAREA) erweitert sich je nach Menge des eingegebenen Textes
	  automatisch nach unten hin.

	- Es werden Session-Informationen mitgeloggt wie das Betreten/Verlassen der Eingabefelder, Klicks auf
	  Eingabefelder und Buttons und das Absenden des Formulars, jeweils mit Zeitstempel (Millisekunden).
	  Dadurch soll erkennbar werden, ob mit dem Formular interagiert wird (menschlicher Benutzer) oder
	  nicht (maschineller Spambot).

	Voraussetzung: Das Eingabeformular wird durch das Perl-Script "contact.pl" verarbeitet.

	Anwendung:

	- In den <head>-Bereich der HTML-Datei (Template) folgende Datei einfügen:

		contact.js

	- In das Eingabeformular der HTML-Datei (Template) folgendes verstecktes Eingabefeld einfügen:

	<input type="hidden" id="session" name="session" value="@SESSION@">
*/

"use strict";

function InitContactForm()
{
	var elems = document.getElementsByTagName('textarea');
	for (var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		elem.style.resize = 'vertical';
		elem.style.height = elem.scrollHeight + 'px';
		elem.style.overflowY = 'hidden';
		elem.addEventListener('input', OnInputTextarea);
	}

	elems = document.querySelectorAll('input[inputmode=numeric]');
	for (var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		elem.addEventListener('beforeinput', OnBeforeInputNumber);
	}

	elems = document.getElementsByTagName('input');
	for (var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		if (elem.type !== 'text' && elem.type !== 'password') continue;
		elem.addEventListener('focus', OnFocus);
		elem.addEventListener('blur', OnBlur);
	}

	elems = document.getElementsByTagName('textarea');
	for (var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		elem.addEventListener('focus', OnFocus);
		elem.addEventListener('blur', OnBlur);
	}

	window.addEventListener('mousedown', OnClick);

	elems = document.getElementsByTagName('form');
	for (var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		elem.addEventListener('submit', OnSubmit);
	}

	for (var tag of ['input', 'textarea', 'select'])
	{
		var elems = document.querySelectorAll('div.fields ' + tag);
		for (var i = 0; i < elems.length; i++)
		{
			elems[i].addEventListener('change', function(event)
			{
			//	event.target.classList.remove('error');
				ResetErrorField(event.target.name);
			})
		}
	}

	AlignLabels();
	AddSessionData('Page', 'loaded');

	function AlignLabels()
	{
		SetWidth('div.fields > table.field td:first-child:has(label)'); // labelpos="left"
		SetWidth('div.fields > table.field td:last-child:has(label)'); // labelpos="right"

		function SetWidth(selector)
		{
			var width = 0;
			var elemsTdLabel = document.querySelectorAll(selector);
			for  (var i = 0; i < elemsTdLabel.length; i++)
			{
				var elemTdLabel = elemsTdLabel[i];
				width = Math.max(width, elemTdLabel.clientWidth);
			}
			for  (var i = 0; i < elemsTdLabel.length; i++)
			{
				var elemTdLabel = elemsTdLabel[i];
				elemTdLabel.style.width = width + 'px';
			}
		}
	}

	const regexNumber = new RegExp("^[0-9]*$");
	function OnBeforeInputNumber(event)
	{
		if (event.data != null && !regexNumber.test(event.data)) 
			event.preventDefault();
	}

	function OnInputTextarea(event)
	{
		this.style.height = 'auto';
		this.style.height = (this.scrollHeight) + 'px';
	}

	function OnFocus(event)
	{
		AddSessionData('Enter', GetElementText(event.target));
	}

	function OnBlur(event)
	{
		AddSessionData('Leave', GetElementText(event.target));
	}

	function OnClick(event)
	{
		var elem = event.target;
		if (!elem.parentElement) return;
		AddSessionData('Click', GetElementText(elem));
	}

	function OnSubmit(event)
	{
		AddSessionData('Submit', GetElementText(event.target));
	}

	function AddSessionData(action, data)
	{
		var elemSession = document.getElementById('session');
		if (!elemSession) return;

		var sessionData = 
			'ms=' + encodeURIComponent(new Date().getTime()) +
			'&action=' + encodeURIComponent(action) +
			'&data=' + encodeURIComponent(data);

		console.log(decodeURIComponent(sessionData));

		if (elemSession.value)
			elemSession.value += '|';
		elemSession.value += sessionData;
	}

	function GetElementText(elem)
	{
		var result = 'Tag=' + elem.tagName.toUpperCase();
		if (elem.id) result += '; ID=' + elem.id;
		if (elem.name) result += '; Name=' + elem.name;
		if (elem.value) result += '; Value=' + GetTextExcerpt(elem.value);
		var txt = GetTextExcerpt(elem.innerText || '');
		if (txt) result += '; Txt=' + txt;
		return result;
	}

	function GetTextExcerpt(txt)
	{
		txt = txt.replace(/[\n]+/g, ' ');
		if (txt.length > 35) txt = txt.substring(0, 30) + '[...]';
		return txt;
	}

	function ResetErrorField(name)
	{
		if (name)
		{
			var elems = document.querySelectorAll('div.fields [name="' + name + '"]');
			for (var i = 0; i < elems.length; i++)
				elems[i].classList.remove('error');
		}
	}
}

function ContactForm_SetErrorField(name)
{
	if (name)
	{
		var elems = document.querySelectorAll('div.fields [name="' + name + '"]');
		for (var i = 0; i < elems.length; i++)
			elems[i].classList.add('error');
	}
}

document.addEventListener('DOMContentLoaded', InitContactForm);
