WIP: added overlay for editing settings via an input text (configurable)

web/src/app/css/app.css

@@ -228,6 +228,9 @@ main {
 .panel input.card-item {
 	padding: .5em !important;
 }
+.overlay #input-text {
+	margin-top: 3em;
+}
 
 .button span {
 	user-select: none;

web/src/app/js/app.js

@@ -363,11 +363,11 @@ app.emoji = {
 app.overlay = {
 	create: async function(template, data, options, cback) {
 		options = options || {};
+		const id  = 'overlay-'+uuidv4();
+		data['oid'] = id;
 		await app.template.loadMany([template], function(tpl) {
 			tpl = tpl[0];
-			const id  = 'overlay-'+uuidv4();
 			const div = document.createElement('div');
-			data['oid'] = id;
 			div.id = id;
 			div.className = 'overlay height-mobile';
 			if (options.dark)
@@ -378,14 +378,23 @@ app.overlay = {
 			if (options.removable)
 				div.setAttribute('onclick', `app.overlay.remove("${id}")`);
 			document.body.appendChild(div);
+			const _script = div.querySelector('script');
+			if (_script !== null) {
+				eval(_script.innerText);
+				_script.remove();
+			}
 			calcHeightMobile();
 		});
-		return true;
+		return id;
 	},
 	remove: function(id) {
 		const elem = document.getElementById(id);
 		if (elem !== undefined && elem !== null)
 			elem.remove();
+		if (window._onOverlayRemove !== undefined) {
+			window._onOverlayRemove();
+			delete window._onOverlayRemove;
+		}
 	},
 	hideAll: function() {
 		document.querySelectorAll('.overlay')

web/src/app/js/pages/settings.js

@@ -17,6 +17,7 @@ app.pages.settings = {
 							!== undefined }, 10000, 50);
 				page().data.profile = json;
 				page().paint.profile(json);
+				app.template.loadMany(['overlay.input']);
 			});
 		},
 	},
@@ -35,5 +36,20 @@ app.pages.settings = {
 		},
 	},
 	actions: {
+		profile: {
+			changeName: {
+				show: function() {
+					app.overlay.create('overlay.input', {
+						type: 'text',
+						placeholder: s('form.name'),
+						value: page().data.profile.account.name,
+						action: 'page().actions.profile.changeName.save()',
+					}, { dark: true, removable: true });
+				},
+				save: function() {
+					console.log('save');
+				},
+			},
+		},
 	},
 }

web/src/app/js/templates/overlay/input.html

@@ -0,0 +1,68 @@
+<script>
+
+window._form = {
+	onSubmit: function() {
+		let result;
+		if ('{.action}' === '{::action}'.replace('::', '.'))
+			result = false;
+		else result = eval('{.action}');
+		if (result === undefined)
+			result = false;
+		if (result === true) {
+			setTimeout(function() {
+				app.overlay.remove('{.oid}');
+				delete window._form;
+			}, 10);
+		}
+		return false;
+	},
+	onValidate: function(value) {
+		return value !== window._form.initialValue
+			&& value.trim() !== '';
+	},
+	onTextInput: function(e) {
+		const asubmit = document.querySelector('#input-text *[onclick*="onSubmit"]');
+		if (window._form.onValidate(e.target.value)) {
+			asubmit.querySelector('.fa-check').style.color = '#51aa14';
+			asubmit.classList.remove('disabled');
+		} else {
+			asubmit.querySelector('.fa-check').style.removeProperty('color');
+			asubmit.classList.add('disabled');
+		}
+	},
+	initialValue: null,
+};
+
+window._onOverlayRemove = function() {
+	delete window._form;
+}
+
+const el = document.querySelector('#input-{.type}');
+if (el !== null) {
+	el.removeAttribute('style');
+	if ('{.type}' === 'text') {
+		const text = el.querySelector('input[type="text"]');
+		window._form.initialValue = text.value;
+		text.focus(); text.select();
+	}
+}
+
+</script>
+
+<div id="input-text" style="display:none"
+	class="panel flex" onclick="event.stopPropagation()">
+	<form class="flex center text-center width-max" style="max-width:35em"
+		onsubmit="return window._form.onSubmit()">
+		<input type="text" name="text" class="card-item width-max"
+			placeholder="{.placeholder}" value="{.value}"
+			onkeyup="window._form.onTextInput(event)"/>
+		<a class="component icon button noback dark round flex disabled"
+			style="width: 2.5em;height: 2.5em;display: inline-block;"
+			title="{s:form.save}" onclick="window._form.onSubmit()">
+			<div class="ic-container center flex size-max">
+				<i class="center fa fa-check fa-fw"
+					style="font-size: 1.2em;"></i>
+			</div>
+		</a>
+	</form>
+</div>

web/src/app/js/templates/settings/profile.html

@@ -3,7 +3,8 @@
 		<div class="person flex">
 			<div class="width-max">
 				<div class="user-name">
-					<span class="bigname button
+					<span onclick="page().actions.profile.changeName.show()"
+						class="bigname button
 						rounder noback darker">{.account.name}</span>
 					<br>
 					<span class="acct" style="

web/src/config/lang/en.php

@@ -14,6 +14,8 @@ $strings = [
 		'login' => 'Log in',
 		'email' => 'E-mail',
 		'password' => 'Password',
+		'name' => 'Name',
+		'save' => 'Save',
 	],
 	'app' => [
 		'years_old' => 'y/o',
@@ -29,6 +31,7 @@ $strings = [
 		'discard' => 'Discard',
 		'send_quiz' => 'Send Quiz!',
 		'not_interested' => 'No longer interested',
+		'exit' => 'Exit',
 		'nav' => [
 			'meet' => 'Meet',
 			'crushes' => 'Your crushes',

web/src/config/lang/es.php

@@ -14,6 +14,8 @@ $strings = [
 		'login' => 'Iniciar sesión',
 		'email' => 'E-mail',
 		'password' => 'Contraseña',
+		'name' => 'Nombre',
+		'save' => 'Guardar',
 	],
 	'app' => [
 		'years_old' => 'Años',
@@ -29,6 +31,7 @@ $strings = [
 		'discard' => 'Descartar',
 		'send_quiz' => '¡Enviar Quiz!',
 		'not_interested' => 'Ya no me interesa',
+		'exit' => 'Salir',
 		'nav' => [
 			'meet' => 'Conoce',
 			'crushes' => 'Tus crush',