Added view-more collapse function on pages.meet posts

web/src/_templates/app/js.php

@@ -19,6 +19,7 @@ var app = {
 				},
 			},
 		},
+		collapse_text_size: 80,
 	},
 };
 </script>

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 } }
 

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> ')

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)) }

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 () {

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',
 	],
 ];

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',
 	],
 ];