Update MBViewer

This commit is contained in:
octospacc 2024-01-14 02:26:43 +01:00
parent 15c06462d2
commit 58819c8c97
4 changed files with 171 additions and 124 deletions

View File

@ -151,8 +151,13 @@
</section>
</div>
<div class="tgme_header_info">
<a href="javascript:;" name="goBack" style="float: left; margin: 8px;" hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<path d="M16.943 7.609a1.333 1.333 0 1 0-1.886-1.886l-9.333 9.333a1.334 1.334 0 0 0 0 1.886l9.333 9.333a1.333 1.333 0 1 0 1.886-1.886l-7.057-7.057h15.448a1.333 1.333 0 0 0 0-2.666H9.886l7.057-7.057z"/>
</svg>
</a>
<!--
<a class="tgme_channel_join_telegram" href="dl?tme=f036ac1a4091d93f77_16903051027483582417">
<a class="tgme_channel_join_telegram">
<svg class="tgme_channel_join_telegram_icon" width="19px" height="16px" viewBox="0 0 19 16">
<g fill="none">
<path fill="#ffffff" d="M0.465,6.638 L17.511,0.073 C18.078,-0.145 18.714,0.137 18.932,0.704 C19.009,0.903 19.026,1.121 18.981,1.33 L16.042,15.001 C15.896,15.679 15.228,16.111 14.549,15.965 C14.375,15.928 14.211,15.854 14.068,15.748 L8.223,11.443 C7.874,11.185 7.799,10.694 8.057,10.345 C8.082,10.311 8.109,10.279 8.139,10.249 L14.191,4.322 C14.315,4.201 14.317,4.002 14.195,3.878 C14.091,3.771 13.926,3.753 13.8,3.834 L5.602,9.138 C5.112,9.456 4.502,9.528 3.952,9.333 L0.486,8.112 C0.077,7.967 -0.138,7.519 0.007,7.11 C0.083,6.893 0.25,6.721 0.465,6.638 Z"></path>

View File

@ -11,6 +11,8 @@
let MbState = {};
const SureArray = (obj) => (Array.isArray(obj) ? obj : [obj]);
// <https://stackoverflow.com/questions/29956338/how-to-accurately-determine-if-an-element-is-scrollable/71170105#71170105>
function CanScrollEl(el, scrollAxis) {
if (0 === el[scrollAxis]) {
@ -35,13 +37,21 @@ function GetDomainFromUrl (url) {
function MakeSiteRestUrl (path='') {
const siteUrl = MbState.siteUrl;
if (GetDomainFromUrl(siteUrl).toLowerCase() === 'octospacc.altervista.org') {
return `${siteUrl}/wp-content/uploads/${siteUrl.split('.').slice(0, 1)[0].split('//')[1]}/scripts/stuff.php?&Thing=SiteWpJsonCors&AccessToken=9ab6e20c&$Query=${path}`;
return `${siteUrl}/wp-content/uploads/${siteUrl.split('.').slice(0, 1)[0].split('//')[1]}/scripts/stuff.php?&Thing=SiteWpJsonCors&AccessToken=9ab6e20c&$Query=${encodeURIComponent(path)}`;
} else {
// TODO: universal cors bypass
return `${siteUrl}/wp-json/${path}`;
if (MbState.platform === 'wordpress.org') {
const proxies = ["corsproxy.io", "corsproxy.org"];
return `https://${proxies[~~(Math.random() * proxies.length)]}/?${siteUrl}/wp-json/${path}`;
} else if (MbState.platform === 'wordpress.com') {
return `https://public-api.wordpress.com/rest/v1.1/sites/${GetDomainFromUrl(siteUrl)}/${path}`;
}
}
}
function MakeApiEndpoint (platform, options) {
// ...
}
async function MbViewerInit () {
if (!location.hash) {
location.hash = '/';
@ -49,8 +59,14 @@ async function MbViewerInit () {
MbState = {
siteData: {
name: "MBViewer",
description: "",
description: `
The messages of this channel are baked inside the app,
and serve as the centralized place for all kinds of information about it,
while at the same time acting as a demo.
Please enjoy your time here, or use the search bar to input a supported URL.
`,
},
platform: "wordpress.org",
};
$('form.tgme_header_search_form')[0].action = '';
$('form.tgme_header_search_form')[0].onsubmit = function(event){
@ -68,6 +84,9 @@ async function MbViewerInit () {
MbState[argTokens[0]] = argTokens.slice(1).join('=');
}
if (MbState.siteUrl) {
if (GetDomainFromUrl(MbState.siteUrl).toLowerCase().endsWith('wordpress.com')) {
MbState.platform = 'wordpress.com';
}
const siteRequest = await fetch(MakeSiteRestUrl());
MbState.siteData = await siteRequest.json();
$('form.tgme_header_search_form')[0].action = `${MbState.siteUrl}/?s`;
@ -75,98 +94,110 @@ async function MbViewerInit () {
$('a.tgme_header_link')[0].href = MbState.siteUrl;
$('.tgme_channel_info_header_username').html(`<a href="${MbState.siteUrl}">${GetDomainFromUrl(MbState.siteUrl).toLowerCase()}</a>`);
$('.tgme_page_photo_image').html(`<img src="${MbState.siteUrl}${MbState.siteData.site_icon_url}"/>`);
$('a[name="goBack"]')[0].hidden = false;
$('section.tgme_channel_history.js-message_history').html(MakeMoreWrapperHtml(0, 'before'));
MbState.lastMustScroll = 3; // Firefox fix
TWeb.loadMore($('.js-messages_more_wrap > a'), true);
} else {
$('a[name="goBack"]')[0].hidden = true;
$('.tgme_page_photo_image').addClass('bgcolor0');
$('.tgme_page_photo_image').attr('data-content', 'MBV');
$('section.tgme_channel_history.js-message_history').append(MakeMbHtml({ content: `
<p>
MBViewer WIP Version, 2024-01-13.
</p>
<p>
Uses code borrowed from <a href="https://t.me">t.me</a>, specially modified to handle custom MB-style data visualization.
This webapp is not affiliated with Telegram, and all rights upon the original materials belong to the original owners.
</p>
</p>` }));
$('section.tgme_channel_history.js-message_history').html(MakeMoreWrapperHtml());
TWeb.loadMore($('.js-messages_more_wrap > a'), true, [{ content: `<p>
Here I am doing, another strange thing of mine.
This is my personal experiment to make an MB-style frontend for sources that are by default not really friendly to that concept.
Since this first day, we will start with just WordPress, and we'll see what comes from that.
See <a href="https://octospacc.altervista.org/2024/01/13/wordpress-che-non-e/">https://octospacc.altervista.org/2024/01/13/wordpress-che-non-e/</a>.
</p>`, date: '2024-01-13' }, { content: `<p>
After fixing a few post-release issues driving me insane (scrolling cough cough), here are some new improvements:
<br/> * Handling of posts without date is just a bit nicer.
<br/> * Added a back button to return to this page here from a real site stream.
<br/> * Added CORS proxies to handle sites normally inaccessible.
<br/> * Hey there, this text and everything is new...
<br/>
I also just now realized that wordpress.com uses a different REST API with different endpoints and parameters,
so I will need to handle that...
</p>`, date: '2024-01-14T02: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.
<br/>
This webapp is not affiliated with Telegram (Telegram FZ LLC, Telegram Messenger Inc.), and
all rights upon the original materials (which are: everything not strictly related to the "MBViewer" mod) belong to the original owners.
</p>` }]);
}
$('.tgme_header_title, .tgme_channel_info_header_title').html(MbState.siteData.name);
$('.tgme_channel_info_description').html(MbState.siteData.description);
//const postsRequest = await fetch(MakeSiteRestUrl('wp/v2/posts/?&offset=0&per_page=1'));
//const postsData = await postsRequest.json();
// // TODO: since this request already gives us the content of the latest post, maybe we can cache it somewhere to avoid wasting too much traffic?
//$('section.tgme_channel_history.js-message_history').append(MakeMoreWrapperHtml(postsData[0].id, 'before'));
$('section.tgme_channel_history.js-message_history').append(MakeMoreWrapperHtml(0, 'before'));
MbState.lastMustScroll = 2;
TWeb.loadMore($('.js-messages_more_wrap > a'), true);
// TODO: scroll to the very bottom of the document somehow after showing a first message, to have a less jarring visual effect?
}
//function MakeMoreWrapperHtml (postId, wrapType) {
// return `<div class="tgme_widget_message_centered js-messages_more_wrap">
// <a href="${MakeSiteRestUrl(`wp/v2/posts/${postId}`)}" data-${wrapType}="" class="tme_messages_more js-messages_more"></a>
// </div>`
//}
function MakeMoreWrapperHtml (postOffset, wrapType) {
MbState.lastPostOffset = (postOffset + 1);
if (postOffset >= 0) {
MbState.lastPostOffset = (postOffset + 1);
}
return `<div class="tgme_widget_message_centered js-messages_more_wrap">
<a href="${MakeSiteRestUrl(`wp/v2/posts/?offset=${postOffset}&per_page=1`)}" data-${wrapType}="" class="tme_messages_more js-messages_more"></a>
</div>`
<a href="${MbState.siteUrl && MakeSiteRestUrl(`wp/v2/posts/?offset=${postOffset}&per_page=1`)}" data-${wrapType}="" class="tme_messages_more js-messages_more"></a>
</div>`;
}
function MakeMbHtml (postData) {
postData = (typeof(postData) === 'string' ? JSON.parse(postData) : postData);
postData = (postData[0] || postData);
return `
${MbState.siteUrl ? MakeMoreWrapperHtml(MbState.lastPostOffset, 'before') : ''}
<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="SpaccInc/1068">
<div class="tgme_widget_message_user">
<a href="${MbState.siteUrl}">
<i class="tgme_widget_message_user_photo ${MbState.siteUrl ? '' : 'bgcolor0'}" style="background-color: unset;" data-content="${MbState.siteUrl ? '' : 'MBV'}">
${MbState.siteUrl ? `<img src="${MbState.siteUrl}${MbState.siteData.site_icon_url}"/>` : ''}
</i>
</a>
</div>
<div class="tgme_widget_message_bubble">
<i class="tgme_widget_message_bubble_tail">
<svg class="bubble_icon" width="9px" height="20px" viewBox="0 0 9 20">
<g fill="none">
<path class="background" fill="#ffffff" d="M8,1 L9,1 L9,20 L8,20 L8,18 C7.807,15.161 7.124,12.233 5.950,9.218 C5.046,6.893 3.504,4.733 1.325,2.738 L1.325,2.738 C0.917,2.365 0.89,1.732 1.263,1.325 C1.452,1.118 1.72,1 2,1 L8,1 Z"></path>
<path class="border_1x" fill="#d7e3ec" d="M9,1 L2,1 C1.72,1 1.452,1.118 1.263,1.325 C0.89,1.732 0.917,2.365 1.325,2.738 C3.504,4.733 5.046,6.893 5.95,9.218 C7.124,12.233 7.807,15.161 8,18 L8,20 L9,20 L9,1 Z M2,0 L9,0 L9,20 L7,20 L7,20 L7.002,18.068 C6.816,15.333 6.156,12.504 5.018,9.58 C4.172,7.406 2.72,5.371 0.649,3.475 C-0.165,2.729 -0.221,1.464 0.525,0.649 C0.904,0.236 1.439,0 2,0 Z"></path>
<path class="border_2x" d="M9,1 L2,1 C1.72,1 1.452,1.118 1.263,1.325 C0.89,1.732 0.917,2.365 1.325,2.738 C3.504,4.733 5.046,6.893 5.95,9.218 C7.124,12.233 7.807,15.161 8,18 L8,20 L9,20 L9,1 Z M2,0.5 L9,0.5 L9,20 L7.5,20 L7.5,20 L7.501,18.034 C7.312,15.247 6.64,12.369 5.484,9.399 C4.609,7.15 3.112,5.052 0.987,3.106 C0.376,2.547 0.334,1.598 0.894,0.987 C1.178,0.677 1.579,0.5 2,0.5 Z"></path>
<path class="border_3x" d="M9,1 L2,1 C1.72,1 1.452,1.118 1.263,1.325 C0.89,1.732 0.917,2.365 1.325,2.738 C3.504,4.733 5.046,6.893 5.95,9.218 C7.124,12.233 7.807,15.161 8,18 L8,20 L9,20 L9,1 Z M2,0.667 L9,0.667 L9,20 L7.667,20 L7.667,20 L7.668,18.023 C7.477,15.218 6.802,12.324 5.64,9.338 C4.755,7.064 3.243,4.946 1.1,2.983 C0.557,2.486 0.52,1.643 1.017,1.1 C1.269,0.824 1.626,0.667 2,0.667 Z"></path>
</g>
</svg>
</i>
<div class="tgme_widget_message_author accent_color">
<a class="tgme_widget_message_owner_name" href="${MbState.siteUrl}">
<span dir="auto">
${MbState.siteData.name}
</span>
let html = '';
const siteHref = (MbState.siteUrl ? `href="${MbState.siteUrl}"` : '');
for (postData of SureArray(postData)) {
html += `
${MbState.siteUrl ? MakeMoreWrapperHtml(MbState.lastPostOffset, 'before') : ''}
<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="">
<div class="tgme_widget_message_user">
<a ${siteHref}>
<i class="tgme_widget_message_user_photo ${MbState.siteUrl ? '' : 'bgcolor0'}" style="background-color: unset;" data-content="${MbState.siteUrl ? '' : 'MBV'}">
${MbState.siteUrl ? `<img src="${MbState.siteUrl}${MbState.siteData.site_icon_url}"/>` : ''}
</i>
</a>
</div>
<div class="tgme_widget_message_text js-message_text before_footer" dir="auto">
<div class="MBPost">
${postData.content?.rendered || postData.content}
<div class="tgme_widget_message_bubble">
<i class="tgme_widget_message_bubble_tail">
<svg class="bubble_icon" width="9px" height="20px" viewBox="0 0 9 20">
<g fill="none">
<path class="background" fill="#ffffff" d="M8,1 L9,1 L9,20 L8,20 L8,18 C7.807,15.161 7.124,12.233 5.950,9.218 C5.046,6.893 3.504,4.733 1.325,2.738 L1.325,2.738 C0.917,2.365 0.89,1.732 1.263,1.325 C1.452,1.118 1.72,1 2,1 L8,1 Z"></path>
<path class="border_1x" fill="#d7e3ec" d="M9,1 L2,1 C1.72,1 1.452,1.118 1.263,1.325 C0.89,1.732 0.917,2.365 1.325,2.738 C3.504,4.733 5.046,6.893 5.95,9.218 C7.124,12.233 7.807,15.161 8,18 L8,20 L9,20 L9,1 Z M2,0 L9,0 L9,20 L7,20 L7,20 L7.002,18.068 C6.816,15.333 6.156,12.504 5.018,9.58 C4.172,7.406 2.72,5.371 0.649,3.475 C-0.165,2.729 -0.221,1.464 0.525,0.649 C0.904,0.236 1.439,0 2,0 Z"></path>
<path class="border_2x" d="M9,1 L2,1 C1.72,1 1.452,1.118 1.263,1.325 C0.89,1.732 0.917,2.365 1.325,2.738 C3.504,4.733 5.046,6.893 5.95,9.218 C7.124,12.233 7.807,15.161 8,18 L8,20 L9,20 L9,1 Z M2,0.5 L9,0.5 L9,20 L7.5,20 L7.5,20 L7.501,18.034 C7.312,15.247 6.64,12.369 5.484,9.399 C4.609,7.15 3.112,5.052 0.987,3.106 C0.376,2.547 0.334,1.598 0.894,0.987 C1.178,0.677 1.579,0.5 2,0.5 Z"></path>
<path class="border_3x" d="M9,1 L2,1 C1.72,1 1.452,1.118 1.263,1.325 C0.89,1.732 0.917,2.365 1.325,2.738 C3.504,4.733 5.046,6.893 5.95,9.218 C7.124,12.233 7.807,15.161 8,18 L8,20 L9,20 L9,1 Z M2,0.667 L9,0.667 L9,20 L7.667,20 L7.667,20 L7.668,18.023 C7.477,15.218 6.802,12.324 5.64,9.338 C4.755,7.064 3.243,4.946 1.1,2.983 C0.557,2.486 0.52,1.643 1.017,1.1 C1.269,0.824 1.626,0.667 2,0.667 Z"></path>
</g>
</svg>
</i>
<div class="tgme_widget_message_author accent_color">
<a class="tgme_widget_message_owner_name" ${siteHref}>
<span dir="auto">
${MbState.siteData.name}
</span>
</a>
</div>
</div>
<div class="tgme_widget_message_footer compact js-message_footer">
<div class="tgme_widget_message_info short js-message_info">
<span class="tgme_widget_message_meta">
<a class="tgme_widget_message_date" href="${postData.link}">
<time datetime="${postData.date}" class="time"></time>
<!-- TODO: show edited status -->
</a>
</span>
<div class="tgme_widget_message_text js-message_text before_footer" dir="auto">
<div class="MBPost">
${postData.content?.rendered || postData.content}
</div>
</div>
<div class="tgme_widget_message_footer compact js-message_footer">
<div class="tgme_widget_message_info short js-message_info">
<span class="tgme_widget_message_meta">
<a class="tgme_widget_message_date" ${postData.link ? `href="${postData.link}"` : ''}>
<time datetime="${postData.date}" class="time"></time>
<!-- TODO: show edited status -->
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
`;
`;
}
return html;
}
$('a[name="goBack"]')[0].onclick = function(){
location.hash = '/';
};
window.addEventListener('hashchange', MbViewerInit);

View File

@ -93,6 +93,9 @@ function formatDate(datetime) {
if (cur_date.getFullYear() == date.getFullYear()) {
return M + ' ' + j;
}
if (!j && !M && !Y) {
return 'Undefined';
}
return M + ' ' + j + ', ' + Y;
}
@ -277,7 +280,7 @@ var TWeb = {
$wrapEl.toggleClass('date_visible', date_visible);
}
},
loadMore: function($moreEl, scrollToLast) {
loadMore: function($moreEl, scrollToLast, dataOverride) {
var loading = $moreEl.data('loading');
if (loading) {
return false;
@ -290,55 +293,61 @@ var TWeb = {
var time0 = +(new Date);
//console.log('loading...', before, after);
var _load = function(url, before, after) {
$.ajax(url, {
success: function(data) {
var time1 = +(new Date);
//console.log('loaded ' + (time1 - time0) + 'ms');
var $data = $(MakeMbHtml(data));
var $helper = $('<div class="tgme_widget_messages_helper"></div>');
$helper.append($data);
$('.js-message_history').append($helper);
$helper.find('.js-widget_message').each(function() {
TPost.init(this);
});
$helper.remove();
var wrapEls = $data.filter('.js-widget_message_wrap').get();
var time2 = +(new Date);
//console.log('prepared ' + (time2 - time1) + 'ms');
var $moreElWrap = $moreEl.parents('.js-messages_more_wrap');
if (before) {
var firstWrapEl = $moreElWrap.next('.js-widget_message_wrap').get();
var $wrapEls = $(wrapEls.concat(firstWrapEl));
TWeb.updateServiceDate($wrapEls);
var y = $moreElWrap.offset().top + $moreElWrap.outerHeight(true) - $(document).scrollTop();
$data.insertBefore($moreElWrap);
var st = $moreElWrap.offset().top - y;
$moreElWrap.remove();
$(window).scrollTop(st);
} else {
var lastWrapEl = $moreElWrap.prev('.js-widget_message_wrap').get();
var $wrapEls = $(lastWrapEl.concat(wrapEls));
TWeb.updateServiceDate($wrapEls, lastWrapEl.length > 0);
$data.insertBefore($moreElWrap);
$moreElWrap.remove();
if (dataOverride) {
_loadContinue(dataOverride);
} else if (url) {
$.ajax(url, {
success: function(data) { _loadContinue(data) },
error: function(data) {
var timeout = $moreEl.data('timeout') || 1000;
$moreEl.data('timeout', timeout > 60000 ? timeout : timeout * 2);
setTimeout(function(){ _load(url, before, after); }, timeout);
}
var time3 = +(new Date);
//console.log('inserted ' + (time3 - time2) + 'ms');
if (scrollToLast || MbState.lastMustScroll > 0) {
$('#BottomAnchor')[0].scrollIntoView();
$('.tgme_widget_message_wrap').last().scrollIntoView();
MbState.lastMustScroll--;
}
if (!IsScrollableY($('html')[0])) {
TWeb.loadMore($('.js-messages_more_wrap > a'), true);
}
},
error: function(data) {
var timeout = $moreEl.data('timeout') || 1000;
$moreEl.data('timeout', timeout > 60000 ? timeout : timeout * 2);
setTimeout(function(){ _load(url, before, after); }, timeout);
}
});
}
};
function _loadContinue(data) {
var time1 = +(new Date);
//console.log('loaded ' + (time1 - time0) + 'ms');
var $data = $(MakeMbHtml(data));
var $helper = $('<div class="tgme_widget_messages_helper"></div>');
$helper.append($data);
$('.js-message_history').append($helper);
$helper.find('.js-widget_message').each(function() {
TPost.init(this);
});
$helper.remove();
var wrapEls = $data.filter('.js-widget_message_wrap').get();
var time2 = +(new Date);
//console.log('prepared ' + (time2 - time1) + 'ms');
var $moreElWrap = $moreEl.parents('.js-messages_more_wrap');
if (before) {
var firstWrapEl = $moreElWrap.next('.js-widget_message_wrap').get();
var $wrapEls = $(wrapEls.concat(firstWrapEl));
TWeb.updateServiceDate($wrapEls);
var y = $moreElWrap.offset().top + $moreElWrap.outerHeight(true) - $(document).scrollTop();
$data.insertBefore($moreElWrap);
var st = $moreElWrap.offset().top - y;
$moreElWrap.remove();
$(window).scrollTop(st);
} else {
var lastWrapEl = $moreElWrap.prev('.js-widget_message_wrap').get();
var $wrapEls = $(lastWrapEl.concat(wrapEls));
TWeb.updateServiceDate($wrapEls, lastWrapEl.length > 0);
$data.insertBefore($moreElWrap);
$moreElWrap.remove();
}
var time3 = +(new Date);
//console.log('inserted ' + (time3 - time2) + 'ms');
if (scrollToLast || MbState.lastMustScroll > 0) {
$('#BottomAnchor')[0].scrollIntoView();
$('.tgme_widget_message_wrap').last().scrollIntoView();
MbState.lastMustScroll--;
}
if (!IsScrollableY($('html')[0])) {
TWeb.loadMore($('.js-messages_more_wrap > a'), true);
MbState.lastMustScroll--;
}
};
_load(url, before, after);
},

View File

@ -1024,7 +1024,9 @@ function checkFrameSize() {
if (H < 10) H = '0' + H;
var i = date.getMinutes();
if (i < 10) i = '0' + i;
return H + ':' + i;
if (H && i) {
return H + ':' + i;
}
}
function formatDuration(duration) {