From 1ee90096287d39b98db751dcf6f9eb15cd58afde Mon Sep 17 00:00:00 2001
From: Niko <niko@nobigtech.es>
Date: Fri, 18 Feb 2022 14:42:04 +0100
Subject: [PATCH] Added view-more collapse function on pages.meet posts

---
 web/src/_templates/app/js.php |  1 +
 web/src/app/css/base.css      |  6 +++++-
 web/src/app/js/app.js         | 20 ++++++++++++++++++++
 web/src/app/js/base.js        |  8 ++++++++
 web/src/app/js/pages/meet.js  | 31 +++++++++++++++++++++++++++++++
 web/src/config/lang/en.php    |  2 ++
 web/src/config/lang/es.php    |  2 ++
 7 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/web/src/_templates/app/js.php b/web/src/_templates/app/js.php
index 2e9cd12..ad34727 100644
--- a/web/src/_templates/app/js.php
+++ b/web/src/_templates/app/js.php
@@ -19,6 +19,7 @@ var app = {
 				},
 			},
 		},
+		collapse_text_size: 80,
 	},
 };
 </script>
diff --git a/web/src/app/css/base.css b/web/src/app/css/base.css
index 2a2ff5d..9e5a452 100644
--- a/web/src/app/css/base.css
+++ b/web/src/app/css/base.css
@@ -2,7 +2,7 @@ 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 {
+.button, a[onclick] {
 	cursor: pointer;
 }
 
@@ -32,6 +32,10 @@ body {
 	height: 100vh;
 }
 
+.collapse.collapsed {
+	display: none !important;
+}
+
 @media (max-width: 400px) { .media-max400 { display: none } }
 @media (max-width: 500px) { .media-max500 { display: none } }
 
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index 4bfa998..c605c69 100644
--- a/web/src/app/js/app.js
+++ b/web/src/app/js/app.js
@@ -118,6 +118,26 @@ app.storage = {
 }
 
 app.post = {
+	_collapsed: {},
+	collapsed: function(id, _default) {
+		if (app.post._collapsed[id] === undefined)
+			return _default;
+		return app.post._collapsed[id] === true;
+	},
+	collapse: function(id, strs) {
+		const co = document.getElementById('collapse-'+id);
+		const cl = document.getElementById('collapse-link-'+id);
+		const collapsed = co.classList.contains('collapsed');
+		if (collapsed) {
+			app.post._collapsed[id] = false;
+			co.classList.remove('collapsed');
+			cl.innerText = strs[1];
+		} else {
+			app.post._collapsed[id] = true;
+			co.classList.add('collapsed');
+			cl.innerText = strs[0];
+		}
+	},
 	prepare4html: function(value, tags) {
 		tags = tags || [];
 		value = value.replaceAll('</a>', '</a> ')
diff --git a/web/src/app/js/base.js b/web/src/app/js/base.js
index 580d4a0..e8c93aa 100644
--- a/web/src/app/js/base.js
+++ b/web/src/app/js/base.js
@@ -124,6 +124,14 @@ function loadScript(id, file, cback) {
 	document.body.appendChild(script);
 }
 
+function printstack() { console.error(new Error().stack) }
+function uuidv4() {
+	return '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);
+	});
+}
+
 function getNormalizedURI() { return window.location.pathname.replace(/\/+?$/, '') }
 function capitalize(s) { return s.charAt(0).toUpperCase() + s.substr(1) }
 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)) }
diff --git a/web/src/app/js/pages/meet.js b/web/src/app/js/pages/meet.js
index 9713ce7..c04a91c 100644
--- a/web/src/app/js/pages/meet.js
+++ b/web/src/app/js/pages/meet.js
@@ -79,6 +79,37 @@ app.pages.meet = {
 				tpl = tpl.replaceAll('{postFgColor}', htmlescape(postFgColor));
 				tpl = tpl.replaceAll('{postBgColor}', htmlescape(postBgColor));
 				dom.innerHTML += tpl;
+
+				// TODO: after-paint changes
+				const ptext = document.querySelector('*[data-id="'+item._id+'"] .status .text > p');
+				const ptext_len = html2text(ptext.innerHTML).length;
+				if (ptext_len > app.vars.collapse_text_size) {
+					var ok = false;
+					var gi = 0, ti = 0;
+					for (var j = 0; j < ptext.childNodes.length; j++) {
+						const node = ptext.childNodes[j];
+						if (node instanceof Text) {
+							for (var k = 0; k < node.textContent.length; k++) {
+								if (ti >= app.vars.collapse_text_size)
+									{ ok = true; break; }
+								gi++; ti++;
+							}
+						} else gi += node.outerHTML.length;
+						if (ok) break;
+					}
+					if (ok && ti > 0) {
+						var value = ptext.innerHTML;
+						const id  = item._id;
+						const t1  = (app.strings.app.view_more || 'view more').replaceAll(/('|")/g, '');
+						const t2  = (app.strings.app.view_less || 'view less').replaceAll(/('|")/g, '');
+						const act = `app.post.collapse('${id}', ['${t1}', '${t2}'])`;
+						value = value.substr(0, gi)+ '<span id="collapse-'+id+'" class="collapse collapsed">'+
+							value.substr(gi)+'</span>'+ '&nbsp;<a id="collapse-link-'+id+'" class="link" onclick="'+act+'">ver más</a>';
+						ptext.innerHTML = value;
+						if (!app.post.collapsed(id, true))
+							app.post.collapse(id, [t1, t2]);
+					}
+				}
 			}
 		}; _();
 		_ = function () {
diff --git a/web/src/config/lang/en.php b/web/src/config/lang/en.php
index c64644d..5870fa4 100644
--- a/web/src/config/lang/en.php
+++ b/web/src/config/lang/en.php
@@ -13,5 +13,7 @@ $strings = [
 	'app' => [
 		'years_old' => 'y/o',
 		'the_fediverse' => 'The Fediverse',
+		'view_more' => 'view more',
+		'view_less' => 'view less',
 	],
 ];
diff --git a/web/src/config/lang/es.php b/web/src/config/lang/es.php
index 5a3edf3..dac66bb 100644
--- a/web/src/config/lang/es.php
+++ b/web/src/config/lang/es.php
@@ -13,5 +13,7 @@ $strings = [
 	'app' => [
 		'years_old' => 'Años',
 		'the_fediverse' => 'El Fediverso',
+		'view_more' => 'ver más',
+		'view_less' => 'ver menos',
 	],
 ];