Added app.media module and template to view page.meet images

* Also fix Firefox height problem when hiding address bar in Mobile

web/src/app/css/base.css

@@ -2,7 +2,8 @@ body {
 	font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,"mastodon-font-sans-serif",sans-serif;
 }
 
-.button, a[onclick] {
+.button, a[onclick],
+.pointer {
 	cursor: pointer;
 }
 
@@ -28,8 +29,14 @@ body {
 .overlay {
 	position: fixed;
 	top: 0;
-	width: 100vw;
-	height: 100vh;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+}
+.overlay.dark {
+	background: #040404c2;
 }
 
 .collapse.collapsed {

web/src/app/js/app.js

@@ -219,6 +219,13 @@ app.post = {
 	},
 }
 
+app.media = {
+	view: function(url) {
+		if (url.match(/^.*\.(jpg|jpeg|png|ico|webp)$/))
+			app.overlay.create('overlay.view_image', { url }, true);
+	},
+}
+
 app.emoji = {
 	expand: function(value) {
 		const cemoji_str = value.match(/:[a-zA-Z0-9\_]+:/g);
@@ -244,6 +251,24 @@ app.emoji = {
 }
 
 app.overlay = {
+	create: function(template, data, removable) {
+		app.template.load(template, function(tpl) {
+			const id  = 'overlay-'+uuidv4();
+			const div = document.createElement('div');
+			data['oid'] = id;
+			div.id = id;
+			div.className = 'overlay dark';
+			div.innerHTML = app.template.fill(data, tpl);
+			if (removable)
+				div.setAttribute('onclick', `app.overlay.remove("${id}")`);
+			document.body.appendChild(div);
+		});
+	},
+	remove: function(id) {
+		const elem = document.getElementById(id);
+		if (elem !== undefined && elem !== null)
+			elem.remove();
+	},
 	hideAll: function() {
 		document.querySelectorAll('.overlay')
 			.forEach(function(dom) {
@@ -299,3 +324,8 @@ window.onhashchange = function(e) {
 	}
 }
 
+window.addEventListener('resize', function(e) {
+	document.querySelectorAll('.overlay').forEach(function(node) {
+		node.style.height = window.innerHeight;
+	});
+})

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

@@ -0,0 +1,5 @@
+<div class="flex size-max">
+	<div class="flex center">
+		<img class="center size-max pointer" src="{.url}"/>
+	</div>
+</div>