From 6fcd0d4a00daec19429d80e8dc44a5639d93e957 Mon Sep 17 00:00:00 2001 From: octospacc Date: Thu, 1 Feb 2024 01:03:56 +0100 Subject: [PATCH] Update home for autoscrolling footerbar, update MBViewer --- public/Assets/CSS/Dark.css | 2 +- public/MBViewer/css/MBViewer.css | 4 +- public/MBViewer/index.html | 2 + public/MBViewer/js/MBViewer.js | 83 +++++++++++++++++++++++++++----- public/index.html | 30 +++++++++++- 5 files changed, 105 insertions(+), 16 deletions(-) diff --git a/public/Assets/CSS/Dark.css b/public/Assets/CSS/Dark.css index e240177..46777a1 100644 --- a/public/Assets/CSS/Dark.css +++ b/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; diff --git a/public/MBViewer/css/MBViewer.css b/public/MBViewer/css/MBViewer.css index b0b3919..e86b6b7 100644 --- a/public/MBViewer/css/MBViewer.css +++ b/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; } diff --git a/public/MBViewer/index.html b/public/MBViewer/index.html index d10d4e5..63afae2 100644 --- a/public/MBViewer/index.html +++ b/public/MBViewer/index.html @@ -204,10 +204,12 @@
Platform
+ + + + + `; + 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('&', '&')?.replaceAll('"', '"') || ''}"/>`; } } + const postInternalId = MbState.internalIdCount++; + const postInnerHtml = ` + ${attachmentsHtml} + ${ReformatPostHtml(postData.content)} + ${postData.quoting?.content ? `[♻️ Reblog]: ${ReformatPostHtml(postData.quoting.content)}` : ''} + `; html += `
@@ -511,10 +549,8 @@ async function MakeMbHtml (postData, makeMoreWrap) {
-
- ${attachmentsHtml} - ${ReformatPostHtml(postData.content)} - ${postData.quoting?.content ? `[♻️ Reblog]: ${ReformatPostHtml(postData.quoting.content)}` : ''} +
+ ${postInnerHtml}
@@ -531,6 +567,17 @@ async function MakeMbHtml (postData, makeMoreWrap) {
`; + 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(); @@ -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){ - const tokens = event.data.split(' '); - $(`iframe[src*="${encodeURIComponent(tokens[0])}"]`).height(tokens[1]); -}; +// TODO: we should check origin +window.addEventListener('message', function(event){ + // 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); diff --git a/public/index.html b/public/index.html index 54a69be..aac6e0e 100644 --- a/public/index.html +++ b/public/index.html @@ -48,7 +48,7 @@

🧲 HashyMagnet (BitTorrent Hash to Magn

🦜 Ecoji v1 (webapp fork)

🪟️ Frames Browser

🃏️ [Matrix] Sticker Helper

-

👁️‍🗨️️ MBViewer (chat-like UI for WordPress & co.)

+

👁️‍🗨️️ MBViewer (WordPress/RSS/... chat-like UI)


🔺️ Fumo Prisms (!)

@@ -80,5 +80,33 @@

🔺️ Fumo Prisms (!) -> Spacc ⛏️ +