Update home for autoscrolling footerbar, update MBViewer

public/Assets/CSS/Dark.css

@@ -87,7 +87,7 @@ Body {
 	Padding-Left: 6px;
 	Padding-Right: 6px;
 	Text-Align: Center;
-	Overflow-X: Scroll;
+	Overflow-X: Auto;
 	Overflow-Y: Hidden;
 	White-Space: NoWrap;
 	Z-Index: 1;

public/MBViewer/css/MBViewer.css

@@ -6,11 +6,11 @@ body {
 	overflow-x: hidden;
 }
 
-.MbPost * {
+div.tgme_widget_message_text > div.MbPost * {
 	max-width: 100%;
 	height: auto;
 }
 
-.MbPost figure {
+div.tgme_widget_message_text > div.MbPost figure {
 	margin: 1em;
 }

public/MBViewer/index.html

@@ -204,10 +204,12 @@
 		<script src="js/tgsticker.js"></script>
 		<script src="js/widget-frame.js"></script>
 		<script src="js/telegram-web.js"></script>
+		<script src="cheerio.js"></script>
 		<script src="../Assets/Lib/lodash.custom.min.js"></script>
 		<script src="../Assets/Lib/defiant.min.js"></script>
 		<script src="../Assets/Lib/Trasformapi.js"></script>
 		<script src="../Assets/Lib/cleanHTML.js"></script>
+		<script src="../Assets/Lib/jailed/jailed.js"></script>
 		<script src="./js/TrasformapiSchema.js.xml"></script>
 		<script src="./js/MBViewer.js"></script>
 		<script>

public/MBViewer/js/MBViewer.js

@@ -152,6 +152,7 @@ async function MbViewerInit () {
 		lastPostOffsetAfter: 0,
 		lastPostOffsetBefore: 0,
 		lastMustScroll: true,
+		internalIdCount: 0,
 	};
 	$('form.tgme_header_search_form')[0].action = '';
 	$('form.tgme_header_search_form')[0].onsubmit = function(event){
@@ -201,6 +202,8 @@ async function MbViewerInit () {
 	MbState.platform = /*SureArray(*/MbState.args.platform/*)*/;
 	MbState.postId = MbState.args.postid;
 	//MbState.postSlug = MbState.args.postslug;
+	RefreshIncludeStyle();
+	RefreshIncludeScript();
 	if (MbState.args.dataurl) {
 		// TODO initially remove built-in site data?
 		MbState.dataInject = {};
@@ -390,7 +393,12 @@ async function MbViewerInit () {
 			Some small things:
 			<br/> * Fixed RSS feeds parsing on Firefox (mentioned in the post linked above), by fixing a bug in Trasformapi
 			<br/> * HTML is now sanitized for removal of dangerous tags and attributes before displaying
-			<br/> * Support including user-defined CSS rules from URL (<code>data:</code> supported) via the "<code>includeStyle</code>" argument
+			<br/> * Support including user-defined CSS rules from URL (<code>data:</code> supported) via the <code>includeStyle</code> argument
+		</p>`, time: '2024-01-27T20:00' }, { content: `<p>
+			New changes:
+			<br/> * Support including user-defined JS scripts from URL (<code>data:</code> supported) via the <code>includeScript</code> argument. A script must expose a <code>MbViewerFunction(data)</code> function to be invoked by the main application to do useful operations, and then return data by calling the <code>MbViewerReturn(data)</code> API function.
+			<br/>
+			...I will probably need to write actual documentation about this, but for sure I will post about this on <a href="https://octospacc.altervista.org/?p=1416">https://octospacc.altervista.org/?p=1416</a>.
 		</p>`, time: '2024-01-27T20:00' }, { content: `<p>
 			Copyright notice: MBViewer uses code borrowed from <a href="https://t.me">t.me</a>,
 			specially modified to handle customized data visualizations in an MB-style.
@@ -408,7 +416,6 @@ async function MbViewerInit () {
 	} else {
 		$('.tgme_page_photo_image').addClass(`bgcolor${MbState.siteData.bgColor}`);
 	}
-	RefreshIncludeStyle();
 }
 
 function RefreshIncludeStyle () {
@@ -422,6 +429,31 @@ function RefreshIncludeStyle () {
 	}
 }
 
+function RefreshIncludeScript () {
+	document.querySelector('iframe#MbViewerIncludeScript')?.remove();
+	if (MbState.args.includescript) {
+		const frameElement = document.createElement('iframe');
+		frameElement.id = 'MbViewerIncludeScript';
+		frameElement.sandbox = 'allow-scripts';
+		frameElement.src = `data:text/html;utf8,
+			<script>
+				function MbViewerReturn (data) {
+					//data.type = 'IncludeScriptResult';
+					window.top.postMessage({ MbViewer: data }, '*');
+				}
+			</script>
+			<script src="${MbState.args.includescript}"></script>
+			<script>
+				window.addEventListener('message', function(event){
+					MbViewerFunction(event.data.MbViewer);
+				});
+			</script>
+		`;
+		frameElement.hidden = true;
+		document.body.appendChild(frameElement);
+	}
+}
+
 function MakeMoreWrapperHtml (wrapType) {
 	let offset, order, relativeOpts;
 	switch (wrapType) {
@@ -479,6 +511,12 @@ async function MakeMbHtml (postData, makeMoreWrap) {
 				attachmentsHtml += `<${elemTag} controls="true" src="${attachment.url}" alt="${attachment.description?.replaceAll('&', '&amp;')?.replaceAll('"', '&quot;') || ''}"/>`;
 			}
 		}
+		const postInternalId = MbState.internalIdCount++;
+		const postInnerHtml = `
+			${attachmentsHtml}
+			${ReformatPostHtml(postData.content)}
+			${postData.quoting?.content ? `[♻️ Reblog]: ${ReformatPostHtml(postData.quoting.content)}` : ''}
+		`;
 		html += `
 			<div class="tgme_widget_message_wrap js-widget_message_wrap date_visible">
 				<div class="tgme_widget_message text_not_supported_wrap js-widget_message" data-post="${postData.id || postData.ID}">
@@ -511,10 +549,8 @@ async function MakeMbHtml (postData, makeMoreWrap) {
 							</a>
 						</div>
 						<div class="tgme_widget_message_text js-message_text before_footer" dir="auto">
-							<div class="MbPost">
+							<div class="MbPost" data-internal-id="${postInternalId}">
-								${attachmentsHtml}
+								${postInnerHtml}
-								${ReformatPostHtml(postData.content)}
-								${postData.quoting?.content ? `[♻️ Reblog]: ${ReformatPostHtml(postData.quoting.content)}` : ''}
 							</div>
 						</div>
 						<div class="tgme_widget_message_footer compact js-message_footer">
@@ -531,6 +567,17 @@ async function MakeMbHtml (postData, makeMoreWrap) {
 				</div>
 			</div>
 		`;
+		if (document.querySelector('iframe#MbViewerIncludeScript')) {
+			function pollPostElement () {
+				const postElement = document.querySelector(`div.tgme_widget_message_text > div.MbPost[data-internal-id="${postInternalId}"]`);
+				if (postElement) {
+					document.querySelector('iframe#MbViewerIncludeScript').contentWindow.postMessage({ MbViewer: { id: postInternalId, html: postInnerHtml } }, '*');
+				} else {
+					setTimeout(pollPostElement, 75);
+				}
+			}
+			pollPostElement();
+		}
 	}
 	if (!html) {
 		// no more messages?
@@ -573,7 +620,7 @@ function ReformatPostHtml (html) {
 						videoElem.load();
 					};
 					videoElem.onloadedmetadata = function(){
-						top.postMessage((videoElem.src + ' ' + getComputedStyle(videoElem).height), '*');
+						window.top.postMessage((videoElem.src + ' ' + getComputedStyle(videoElem).height), '*');
 					};
 					videoElem.load();
 				</script>
@@ -604,13 +651,25 @@ function ResizeLayouts () {
 }
 
 $('a[name="goBack"]')[0].onclick = function(){
-	ArgsRewrite({ dataurl: null, siteurl: null, postid: null, platform: null, includestyle: null /*postslug: null*/ });
+	ArgsRewrite({ dataurl: null, siteurl: null, postid: null, platform: null, includestyle: null, includescript: null /*postslug: null*/ });
 };
 
-window.onmessage = function(event){
+// TODO: we should check origin
-	const tokens = event.data.split(' ');
+window.addEventListener('message', function(event){
-	$(`iframe[src*="${encodeURIComponent(tokens[0])}"]`).height(tokens[1]);
+	// TODO edit the video embed function to send objects for consistency
-};
+	if (typeof(event.data) === 'string') {
+		const tokens = event.data.split(' ');
+		$(`iframe[src*="${encodeURIComponent(tokens[0])}"]`).height(tokens[1]);
+	}
+	else if (event.data.MbViewer) {
+		const data = event.data.MbViewer;
+		//switch (data.type) {
+		//	case 'IncludeScriptResult':
+		document.querySelector(`div.tgme_widget_message_text > div.MbPost[data-internal-id="${parseInt(data.id)}"]`).innerHTML = cleanHTML(data.html);
+		//	break;
+		//}
+	}
+});
 
 window.addEventListener('resize', ResizeLayouts);
 window.addEventListener('hashchange', MbViewerInit);

public/index.html

@@ -48,7 +48,7 @@
 			<h4><a href="./Ecoji">🦜 Ecoji v1</a> <small>(webapp fork)</small></h4>
 			<h4><a href="./FramesBrowser">🪟️ Frames Browser</a></h4>
 			<h4><a href="./MatrixStickerHelper">🃏️ [Matrix] Sticker Helper</a></h4>
-			<h4><a href="./MBViewer">👁️‍🗨️️ MBViewer</a> <small>(chat-like UI for WordPress & co.)</small></h4>
+			<h4><a href="./MBViewer">👁️‍🗨️️ MBViewer</a> <small>(WordPress/RSS/... chat-like UI)</small></h4>
 			<br/>
 			<h4><a href="https://octospacc.gitlab.io/FumoPrisms">🔺️ Fumo Prisms (!)</a></h4>
 		</div></div>
@@ -80,5 +80,33 @@
 			<a href="https://spacc-inc.github.io">-&gt; Spacc ⛏️</a>
 		</span>
 	</div>
+	<script>(function(){
+		var footerElem = document.querySelector('div.Footer');
+		var footerScrollLast;
+		var footerScrollDir = 1;
+		var footerShouldScroll = true;
+		footerElem.onclick = footerElem.ontouch = footerElem.ontouchstart = footerElem.onmouseover = footerElem.onmouseenter = stopFooterScroll;
+		footerElem.onmouseleave = footerElem.ontouchend = restartFooterScroll;
+		var footerScrollIndex;
+		function serviceFooterScroll() {
+			footerScrollIndex = setInterval(function(){
+				if (footerElem.scrollLeft === footerScrollLast) {
+					footerScrollDir *= -1;
+				}
+				footerScrollLast = footerElem.scrollLeft;
+				footerElem.scrollLeft += footerScrollDir;
+			}, 25);
+		}
+		function restartFooterScroll() {
+			if (!footerScrollIndex) {
+				footerScrollIndex = setTimeout(serviceFooterScroll, 2000);
+			}
+		}
+		function stopFooterScroll() {
+			clearInterval(footerScrollIndex);
+			footerScrollIndex = null;
+		}
+		serviceFooterScroll();
+	})();</script>
 </body>
 </html>