From 6bf5ee7fcd2405a921207b807aed445227fd00b0 Mon Sep 17 00:00:00 2001
From: Niko <niko@nobigtech.es>
Date: Fri, 25 Feb 2022 15:25:21 +0100
Subject: [PATCH] Added a navigation at bottom with "Back" button in fullscreen

* Refactor all buttons with "noback" to support custom backgrounds
* Create calcCustomCss function that creates custom background-color hover colors automatically
* Other refactors
---
 web/src/_templates/app/header.php            |  4 +-
 web/src/_templates/buttons/menu.php          |  2 +-
 web/src/app/app.php                          | 16 +++++
 web/src/app/css/app.css                      | 30 ++++++++++
 web/src/app/css/themes/light.css             |  6 +-
 web/src/app/js/app.js                        |  2 +
 web/src/app/js/base.js                       | 63 +++++++++++++++++++-
 web/src/app/js/templates/home/quiz_item.html |  2 +-
 web/src/app/js/templates/meet/actions.html   | 10 ++--
 web/src/app/js/templates/meet/empty.html     |  2 +-
 web/src/app/js/templates/quiz/item.html      |  2 +-
 web/src/app/js/templates/toast/confirm.html  |  4 +-
 12 files changed, 124 insertions(+), 19 deletions(-)

diff --git a/web/src/_templates/app/header.php b/web/src/_templates/app/header.php
index f54ed8f..9edfa54 100644
--- a/web/src/_templates/app/header.php
+++ b/web/src/_templates/app/header.php
@@ -23,7 +23,7 @@
 <header class="flex">
 	<div id="nav-container" class="flex center">
 		<div class="flex">
-			<div id="fedilove-icon" class="flex center icon button round">
+			<div id="fedilove-icon" class="flex center icon button noback round">
 			<a class="center" href="#">
 				<img class="fedilove-icon" src="/assets/images/icon-proto-1.png"/>
 			</a>
@@ -47,7 +47,7 @@
 			</div>
 		</div>
 		<?php if ($actor !== null): ?>
-		<div class="flex icon button round">
+		<div class="flex icon button noback round">
 			<a class="center" href="javascript:app.navmenu.show()">
 				<img class="avatar round"
 					src="<?php echo htmlspecialchars($actor->icon) ?>"/>
diff --git a/web/src/_templates/buttons/menu.php b/web/src/_templates/buttons/menu.php
index 41170ad..8a874f1 100644
--- a/web/src/_templates/buttons/menu.php
+++ b/web/src/_templates/buttons/menu.php
@@ -6,7 +6,7 @@ $alt_s = false;
 if ($id !== false)
 	$alt_s = 'alt_'.$id;
 ?>
-<a class="component icon button <?php echo ($class ?? '') ?>"
+<a class="component icon button noback <?php echo ($class ?? '') ?>"
 	<?php if ($id !== false): ?>
 	id="<?php echo $id ?>"
 	<?php endif ?>
diff --git a/web/src/app/app.php b/web/src/app/app.php
index df1295d..eba68f4 100644
--- a/web/src/app/app.php
+++ b/web/src/app/app.php
@@ -33,4 +33,20 @@ $actor = $database->getActorByUsername($user->username);
 	</div>
 </div>
 
+<div id="nav-full" class="fixed-top size-max height-mobile" style="display:none">
+	<div class="panel nostyle flex size-max">
+	<div class="content center height-max">
+		<div id="buttons" class="content absolute-bottom">
+		<div style="display: flow-root; margin: 2em">
+			<div class="component button round floating right"
+				style="background-color: #db71ff"
+				onclick="window.history.back()">
+				<i class="fa fa-arrow-left fa-fw"></i>
+			</div>
+		</div>
+		</div>
+	</div>
+	</div>
+</div>
+
 <?php tpl('app.footer') ?>
diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css
index a25649d..99aa6cd 100644
--- a/web/src/app/css/app.css
+++ b/web/src/app/css/app.css
@@ -8,6 +8,9 @@ body.app.fullscreen {
 body.app.fullscreen main {
 	margin: auto !important;
 }
+body.app.fullscreen #app-container {
+	margin-bottom: 8em !important;
+}
 .app header {
 	height: 4.5em;
 }
@@ -69,6 +72,19 @@ img.avatar {
   filter: grayscale() !important;
 }
 
+.button.floating {
+	padding: 1.5em;
+	box-shadow: 0px 0px 1em #0000005e;
+	border: 1px solid #0000002e;
+}
+.button.floating .fa {
+	color: #fff !important;
+	font-size: 1.4em;
+}
+.button.floating.right {
+	float: right;
+}
+
 a.button {
 	text-decoration: none;
 	user-select: none;
@@ -112,6 +128,15 @@ main {
 #nav-chat .fa { color: #62c672 }
 #nav-chat.active { background: linear-gradient(#62c6723b, transparent, transparent, transparent) }
 
+#nav-full {
+	user-select: none;
+	pointer-events: none;
+}
+#nav-full #buttons .button {
+	user-select: auto;
+	pointer-events: all;
+}
+
 #app-container {
 	max-width: 60em;
 	width: 100%;
@@ -125,6 +150,11 @@ main {
 @media (max-width: 700px) {
 	.panel { margin-bottom: .4em !important }
 }
+.panel.nostyle {
+	padding: 0 !important;
+	background: none !important;
+	box-shadow: none !important;
+}
 .panel .content {
 	max-width: var(--content_max_width);
 	width: 100%;
diff --git a/web/src/app/css/themes/light.css b/web/src/app/css/themes/light.css
index 038bc8d..1d25c04 100644
--- a/web/src/app/css/themes/light.css
+++ b/web/src/app/css/themes/light.css
@@ -11,11 +11,11 @@ body.app {
 	box-shadow: 0px 0px 5px #0000001c;
 }
 
-.button:not(.disabled,.light):hover {
+.button.noback:not(.disabled,.light):hover {
 	background: #0000000a !important;
 }
-.button:not(.disabled,.light):active,
-.button:not(.disabled,.light):focus {
+.button.noback:not(.disabled,.light):active,
+.button.noback:not(.disabled,.light):focus {
 	background: #00000024 !important;
 }
 
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index 402fa2c..d0b099c 100644
--- a/web/src/app/js/app.js
+++ b/web/src/app/js/app.js
@@ -251,6 +251,7 @@ app.fullscreen = {
 		el.classList.add('absolute-top');
 		el.classList.add('width-max');
 		document.querySelector('header').style.display = 'none';
+		document.querySelector('#nav-full').removeAttribute('style');
 		document.body.classList.add('fullscreen');
 	},
 	disable: function() {
@@ -258,6 +259,7 @@ app.fullscreen = {
 		el.classList.remove('absolute-top');
 		el.classList.remove('width-max');
 		document.querySelector('header').removeAttribute('style');
+		document.querySelector('#nav-full').style.display = 'none';
 		document.body.classList.remove('fullscreen')
 	},
 }
diff --git a/web/src/app/js/base.js b/web/src/app/js/base.js
index e467a52..14ea4a1 100644
--- a/web/src/app/js/base.js
+++ b/web/src/app/js/base.js
@@ -212,11 +212,14 @@ function hashredir(tohash, fallback) {
 }
 
 function printstack() { console.error(new Error().stack) }
-function uuidv4() {
-	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+function uuidv4(sep) {
+	sep = sep === undefined ? true : sep;
+	const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
 		var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
 		return v.toString(16);
 	});
+	if (sep) return uuid;
+	return uuid.replaceAll('-','');
 }
 
 function getNormalizedURI() { return window.location.pathname.replace(/\/+?$/, '') }
@@ -334,12 +337,66 @@ const http = {
 	},
 };
 
+function buildRGB(r, g, b) {
+	if (r > 255) r = 255;
+	if (g > 255) g = 255;
+	if (b > 255) b = 255;
+	if (r < 0) r = 0;
+	if (g < 0) g = 0;
+	if (b < 0) b = 0;
+	return `rgb(${r}, ${g}, ${b})`;
+}
+
+function parseRGB(string) {
+	if (string === undefined) return null;
+	var rgb = string.substr(string.indexOf('(')+1).trim();
+	rgb = rgb.substr(0, rgb.lastIndexOf(')')).trim();
+	rgb = rgb.split(',');
+	for (var i in rgb)
+		rgb[i] = parseInt(rgb[i]);
+	return rgb;
+}
+
 function calcHeightMobile() {
 	document.querySelectorAll('.height-mobile').forEach(function(node) {
 		node.style.height = `${window.innerHeight}px`;
 	});
 }
-window.addEventListener('load', function(e) { calcHeightMobile() });
+function calcCustomCss() {
+	var dom = document.getElementById('custom-css');
+	if (dom === null) {
+		dom = document.createElement('style');
+		document.body.appendChild(dom);
+	}
+	dom.innerHTML = '';
+	const cssObjs = document.querySelectorAll('.button.component:not(.noback)');
+	for (var i = 0; i < cssObjs.length; i++) {
+		const id  = 'cs-' + uuidv4(false).substr(0,16);
+		const obj = cssObjs[i];
+		obj.setAttribute('data-cs', id);
+		const rgb = parseRGB(obj.style['background-color']);
+		if (rgb === null) continue;
+
+		const colorH = buildRGB(rgb[0]-10, rgb[1]-10, rgb[2]-10);
+		const colorF = buildRGB(rgb[0]-25, rgb[1]-25, rgb[2]-25);
+		console.log(rgb);
+		const _css = `
+		*[data-cs="{id}"]:hover { background-color: {colorH} !important }
+		*[data-cs="{id}"]:active,
+		*[data-cs="{id}"]:focus { background-color: {colorF} !important }
+		`.replaceAll('{id}', id)
+			.replaceAll('{colorH}', colorH)
+			.replaceAll('{colorF}', colorF)
+			.trim();
+		dom.innerHTML += _css;
+	}
+}
+
+window.addEventListener('load', function(e) {
+	calcHeightMobile();
+	calcCustomCss();
+});
+
 window.addEventListener('resize', function(e) { calcHeightMobile() });
 (function() {
 	if (window.cssprops !== undefined) {
diff --git a/web/src/app/js/templates/home/quiz_item.html b/web/src/app/js/templates/home/quiz_item.html
index d480494..2bb8882 100644
--- a/web/src/app/js/templates/home/quiz_item.html
+++ b/web/src/app/js/templates/home/quiz_item.html
@@ -1,4 +1,4 @@
-<div class="card-item item button dark rounder" data-id="{._id}"
+<div class="card-item item button noback dark rounder" data-id="{._id}"
 	onclick="app.pages.home.loadQuiz('{.id}')"
 	onEnter="app.pages.home.loadQuiz('{.id}')"
 	tabindex="0">
diff --git a/web/src/app/js/templates/meet/actions.html b/web/src/app/js/templates/meet/actions.html
index 3854b89..dec5fec 100644
--- a/web/src/app/js/templates/meet/actions.html
+++ b/web/src/app/js/templates/meet/actions.html
@@ -1,6 +1,6 @@
 <div id="meet-actions" class="height-max flex">
 	<div class="flex center">
-		<a class="component icon button light round" title="{s:alt.nav_close}"
+		<a class="component icon button noback light round" title="{s:alt.nav_close}"
 			href="javascript:window.history.back()"
 			style="position: absolute; left: 0; margin-left: .5em;">
 			<div class="ic-container flex">
@@ -8,28 +8,28 @@
 			</div>
 		</a>
 		<a id="meet-action-discard"
-			class="component icon button light round" title="{s:alt.nav_discard}"
+			class="component icon button noback light round" title="{s:alt.nav_discard}"
 			href="javascript:app.pages.meet.actions.discard()">
 			<div class="ic-container flex">
 				<i class="center fa fa-times-circle fa-fw"></i>
 			</div>
 		</a>
 		<a id="meet-action-crush"
-			class="component icon button light round" title="{s:alt.nav_crush}"
+			class="component icon button noback light round" title="{s:alt.nav_crush}"
 			href="javascript:app.pages.meet.actions.crush()">
 			<div class="ic-container flex">
 				<i class="center fa fa-heart fa-fw"></i>
 			</div>
 		</a>
 		<a id="meet-action-quiz"
-			class="component icon button light round" title="{s:alt.action_quiz}"
+			class="component icon button noback light round" title="{s:alt.action_quiz}"
 			href="javascript:app.pages.meet.actions.quiz()">
 			<div class="ic-container flex">
 				<i class="center fa fa-quote-right fa-fw"></i>
 			</div>
 		</a>
 		<a id="meet-action-maybe"
-			class="component icon button light round" title="{s:alt.nav_crush}"
+			class="component icon button noback light round" title="{s:alt.nav_crush}"
 			href="javascript:app.pages.meet.actions.maybe()">
 			<div class="ic-container flex">
 				<i class="center fa fa-question-circle fa-fw"></i>
diff --git a/web/src/app/js/templates/meet/empty.html b/web/src/app/js/templates/meet/empty.html
index 81b67e4..5578ad5 100644
--- a/web/src/app/js/templates/meet/empty.html
+++ b/web/src/app/js/templates/meet/empty.html
@@ -5,7 +5,7 @@
 		<p>{s:app.meet_empty_p}</p>
 		<br>
 		<a id="be-first" href="#compose"
-			class="button light rounder"
+			class="button noback light rounder"
 			>{s:app.be_the_first}</a>
 	</div>
 </div>
diff --git a/web/src/app/js/templates/quiz/item.html b/web/src/app/js/templates/quiz/item.html
index 526be76..8e8fa51 100644
--- a/web/src/app/js/templates/quiz/item.html
+++ b/web/src/app/js/templates/quiz/item.html
@@ -13,7 +13,7 @@
 	<div class="type-options">
 		<fieldset>
 		{loop:options}
-		<label class="card-item button rounder flex">
+		<label class="card-item button noback rounder flex">
 			<div class="center">
 			<input type="radio" name="question_{.index}"
 				value="{.item}">
diff --git a/web/src/app/js/templates/toast/confirm.html b/web/src/app/js/templates/toast/confirm.html
index 7775cd7..d6273f6 100644
--- a/web/src/app/js/templates/toast/confirm.html
+++ b/web/src/app/js/templates/toast/confirm.html
@@ -1,6 +1,6 @@
 <div class="confirm flex">
-	<a class="width-max text-center button rounder nope"
+	<a class="width-max text-center button noback rounder nope"
 		onclick="app.toast.dismiss('{.id}', event)">{.no_text}</a>
-	<a class="width-max text-center button rounder yes"
+	<a class="width-max text-center button noback rounder yes"
 		onclick="app.toast.accept('{.id}', event)">{.yes_text}</a>
 </div>